当前位置：首页 > uni-app

uniapp 卡片滑动

2026-02-06 02:05:50uni-app

uniapp 实现卡片滑动效果

使用swiper组件实现基础滑动

在uniapp中，可以利用swiper和swiper-item组件快速实现卡片滑动效果。这种方式适合横向滑动的卡片布局。

<template>
  <swiper class="card-swiper" :indicator-dots="true" :autoplay="false">
    <swiper-item v-for="(item, index) in cardList" :key="index">
      <view class="swiper-item">
        <card :data="item"></card>
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      cardList: [
        {title: '卡片1', content: '内容1'},
        {title: '卡片2', content: '内容2'},
        {title: '卡片3', content: '内容3'}
      ]
    }
  }
}
</script>

<style>
.card-swiper {
  height: 300px;
}
.swiper-item {
  padding: 15px;
}
</style>

使用movable-area实现自定义滑动

如果需要更灵活的滑动效果，可以使用movable-area和movable-view组件组合实现。

<template>
  <movable-area class="movable-area">
    <movable-view class="movable-view" direction="horizontal" @change="onChange">
      <view v-for="(item, index) in cardList" :key="index" class="card">
        {{item.title}}
      </view>
    </movable-view>
  </movable-area>
</template>

<style>
.movable-area {
  width: 100%;
  height: 300px;
}
.movable-view {
  display: flex;
  height: 100%;
}
.card {
  width: 80vw;
  margin: 0 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

使用第三方组件库

uni-ui和uView等第三方组件库提供了更完善的卡片滑动组件。

安装uni-ui后使用：

<template>
  <uni-swipe-action>
    <uni-swipe-action-item v-for="(item, index) in list" :key="index">
      <view class="card-content">
        {{item}}
      </view>
    </uni-swipe-action-item>
  </uni-swipe-action>
</template>

手势滑动事件处理

通过touch事件实现更精细的滑动控制：

methods: {
  touchStart(e) {
    this.startX = e.touches[0].clientX
  },
  touchMove(e) {
    this.moveX = e.touches[0].clientX
    this.offsetX = this.moveX - this.startX
    // 根据offsetX更新卡片位置
  },
  touchEnd() {
    // 判断滑动距离决定是否切换卡片
  }
}