uniapp 循环数据做成卡面并且上下叠加只显示一半

UniApp是一个基于Vue.js的跨平台框架，它可以帮助开发者构建一次编写、多端运行的应用，包括Web、iOS、Android等。如果你想在UniApp项目中创建循环滚动的数据卡面效果，并且每个卡片仅显示一半，你可以按照以下步骤操作：

1. **数据绑定**: 首先，你需要准备一个数据数组，包含你要展示的卡片内容。每个卡片可以是一个对象，包含标题、图片等信息。

data() {
  return {
    cards: [
      { title: '卡片1', image: 'image1.jpg' },
      { title: '卡片2', image: 'image2.jpg' },
      // 更多卡片...
    ]
  };
}

2. **模板设计**: 使用`v-for`指令遍历数据数组，创建卡片组件，并设置CSS样式使其水平居中，宽度固定，然后只显示一半高度：

<template>
  <view class="scrolling-cards">
    <view v-for="(card, index) in cards" :key="index" class="card">
      <view :style="{ transform: `translateX(${index * (cards.length - 1) / 2}px)` }">
        <image :src="card.image" style="width: 100%; height: 50%; object-fit: cover;"></image>
        <text>{{ card.title }}</text>
      </view>
    </view>
  </view>
</template>

这里的`:style`属性用于动态添加CSS样式，`transform`用于控制卡片的横向滑动效果。

3. **CSS样式**: 定义`.scrolling-cards`容器和`.card`的样式，比如设置overflow-x为hidden来隐藏水平滚动，同时设置视口适配：

.scrolling-cards {
  overflow-x: hidden;
  white-space: nowrap;
  width: fit-content; /* 或者自适应屏幕宽度 */
}

.card {
  position: relative;
  width: 200px; /* 根据需求调整卡片宽度 */
  margin-right: -1px; /* 防止间距 */
  transition: transform 0.5s ease;
}

/* 确保最后一个卡片不自动滑出屏幕 */
.card:last-child {
  transform: translateX(0);
}