更新记录

1.0.0（2026-10-07） 下载此版本

[1.0.0] - 2026-08-25

新增

• 首次发布
• 支持卡片堆叠展示
• 支持手势左右滑动
• 支持无限循环
• 支持自动播放
• 支持点击事件回调
• 支持配置缩放、偏移、旋转、透明度等参数

平台兼容性

uni-app(3.8.5)

CardStack 卡片堆叠组件

一款支持手势拖拽滑动、无限循环、自动播放的卡片堆叠组件，适用于 Tinder 式卡片交互、商品推荐、AI 问答等场景。

特性

• ✅ 手势拖拽滑动（左右切换卡片）
• ✅ 无限循环 / 有限模式
• ✅ 自动播放（可配置间隔）
• ✅ 用户交互后暂停 / 恢复自动播放
• ✅ 堆叠错落效果（缩放、偏移、旋转、透明度可配置）
• ✅ 点击事件回调
• ✅ 兼容 App / H5 / 微信小程序全平台

基本使用

<template>
  <view class="page">
    <card-stack
      ref="cardStack"
      :items="reviewList"
        height="520rpx"
        :loop="true"
        :autoplay="true"
        :stopOnUserSwipe="false"
        :duration="300"
        :stack-depth="3"
        :stack-offset-x="10"
        :stack-offset-y="8"
        :stack-scale-step="0.025"
        :max-rotate="60"
        :swipe-threshold="0.22"
        :short-swipe-velocity="0.45"
        @change="onCardChange"
        @cardClick="onRightCardClick"
    >
    <template #card="{ item }">
        <view class="review-card">
          <view class="review-card__header">
            <!-- <image
              class="avatar"
              :src="item.avatar"
              mode="aspectFill"
            /> -->
            <view class="user-info">
              <view class="name">
                {{ item.name }}
              </view>
              <view class="age">
                {{ item.age }}岁 | {{ item.gender }}
              </view>
            </view>
          </view>
          <view class="review-card__content">
            {{ item.content }}
          </view>
          <view class="review-card__button">
            购买同款
          </view>
        </view>
    </template>
    </card-stack>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reviewList: [
        {
          id: 1,
          avatar: '/static/avatar/1.png',
          name: 'j的name',
          age: 42,
          gender: '男',
          content: '效果真的不错，每天两粒，吃了快一个月。'
        },
        {
          id: 2,
          avatar: '/static/avatar/2.png',
          name: '阿源',
          age: 38,
          gender: '男',
          content: '确实实用，现在指标已经明显下降。'
        },
        {
          id: 3,
          avatar: '/static/avatar/3.png',
          name: '王先生',
          age: 31,
          gender: '男',
          content: '坚持使用了一段时间，整体感觉不错。'
        },
        {
          id: 4,
          avatar: '/static/avatar/4.png',
          name: 'JamesCard',
          age: 42,
          gender: '男',
          content: '连续使用之后效果比较明显。'
        }
      ]
    }
  },
  methods: {
    onCardChange(e) {
      console.log('当前卡片：', e.index)
      console.log('切换方向：', e.direction)
    },
    onRightCardClick(e) {
        console.log('当前卡片：', e.index)
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 30rpx;
}

.review-card {
  height: 100%;
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
}

.review-card__header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-info {
  margin-left: 20rpx;
}

.name {
  font-size: 30rpx;
  font-weight: 600;
}

.age {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #999;
}

.review-card__content {
  margin-top: 40rpx;
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
}

.review-card__button {
  margin-top: 40rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 36rpx;
  color: #666;
}
</style>

Props

Events

Slot

Slot 参数说明

方法

通过 ref 调用：

<card-stack ref="stackRef" :items="list" />

<script>
export default {
  methods: {
    goNext() {
      this.$refs.stackRef.next();  // 切换到下一张
    },
    goPrev() {
      this.$refs.stackRef.prev();  // 切换到上一张
    },
  },
};
</script>

使用示例

1. 基础卡片堆叠

<card-stack :items="list" height="420rpx">
  <template #card="{ item }">
    <view class="card">{{ item.title }}</view>
  </template>
</card-stack>

2. 自动播放

<card-stack
  :items="list"
  :autoplay="true"
  :autoplay-interval="3000"
  height="420rpx"
>
  <template #card="{ item }">
    <view class="card">{{ item.title }}</view>
  </template>
</card-stack>

3. 用户滑动后 3 秒恢复自动播放

<card-stack
  :items="list"
  :autoplay="true"
  :autoplay-interval="3000"
  :stop-on-user-swipe="false"
  :resume-autoplay-delay="3000"
  height="420rpx"
>
  <template #card="{ item }">
    <view class="card">{{ item.title }}</view>
  </template>
</card-stack>

4. 卡片点击

<card-stack
  :items="list"
  height="420rpx"
  @cardClick="onCardClick"
>
  <template #card="{ item }">
    <view class="card">{{ item.title }}</view>
  </template>
</card-stack>

<script>
export default {
  methods: {
    onCardClick(e) {
      console.log('点击了:', e.item);
    },
  },
};
</script>

自动播放行为说明

注意事项

1. 卡片内容高度：建议在插槽内使用固定高度的卡片，避免布局跳动
2. 图片性能：图片较大时建议使用 CDN 压缩参数，减少渲染开销
3. items 变化：列表变化会自动重启自动播放
4. loop 为 false：滑到边界时会触发回弹，不会循环

兼容性

更新日志

详见 changelog.md

License

MIT