uni-app 如何实现像IOS卡片堆叠的样子？

在uni-app中实现类似iOS卡片堆叠的效果，可以通过使用CSS的transform属性和z-index来实现。以下是一个基本的代码示例，展示了如何在uni-app中实现这种效果。

首先，我们需要准备一些卡片组件，并给它们设置基本的样式。

1. 创建卡片组件（例如：Card.vue）

<template>
  <div class="card" :style="cardStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  computed: {
    cardStyle() {
      const scale = 0.95 + (this.index / this.total) * 0.05;
      const translateZ = this.index * 10;
      return {
        transform: `scale(${scale}) translateZ(${translateZ}px)`,
        zIndex: this.total - this.index
      };
    }
  }
};
</script>

<style scoped>
.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  overflow: hidden;
}
</style>

2. 使用卡片组件并堆叠（例如：App.vue）

<template>
  <view class="container">
    <card v-for="(card, index) in cards" :key="index" :index="index" :total="cards.length">
      <text>{{ card.name }}</text>
    </card>
  </view>
</template>

<script>
import Card from './components/Card.vue';

export default {
  components: {
    Card
  },
  data() {
    return {
      cards: [
        { name: 'Card 1' },
        { name: 'Card 2' },
        { name: 'Card 3' },
        // 添加更多卡片
      ]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

解释

Card.vue：
- 通过props接收卡片的索引和总数。
- 使用computed属性计算每张卡片的transform和zIndex。
- scale属性根据索引动态调整，使卡片按一定比例缩放。
- translateZ属性根据索引调整卡片的深度，增加立体感。
- zIndex属性确保卡片按索引顺序堆叠。
App.vue：
- 使用v-for指令循环渲染卡片组件。
- 传递卡片的索引和总数给卡片组件。

这种方法利用了CSS的3D变换和z-index属性，可以创建出类似iOS卡片堆叠的视觉效果。你可以根据实际需求进一步调整样式和动画效果。