uniapp小程序做卡片滑动效果
时间: 2023-12-12 07:35:53 浏览: 112
以下是uniapp小程序做卡片滑动效果的方法:
1.使用swiper组件实现卡片滑动效果,代码如下:
```html
<swiper class="swiper-container" indicator-dots="false" autoplay="false" circular="true" vertical="false" duration="300" easing-function="easeInOutCubic">
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
<!-- 卡片内容 -->
</swiper-item>
</swiper>
```
2.使用touch事件实现卡片滑动效果,代码如下:
```html
<view class="card" v-for="(item, index) in list" :key="index" :style="{transform: 'translateX(' + item.translateX + 'px) translateY(' + item.translateY + 'px) rotate(' + item.rotate + 'deg)'}" @touchstart="touchstart(index, $event)" @touchmove="touchmove(index, $event)" @touchend="touchend(index, $event)">
<!-- 卡片内容 -->
</view>
```
```javascript
data() {
return {
list: [
{
translateX: 0,
translateY: 0,
rotate: 0,
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
isTouch: false
},
// ...
]
}
},
methods: {
touchstart(index, e) {
this.list[index].startX = e.touches[0].clientX
this.list[index].startY = e.touches[0].clientY
this.list[index].isTouch = true
},
touchmove(index, e) {
if (!this.list[index].isTouch) return
let moveX = e.touches[0].clientX - this.list[index].startX
let moveY = e.touches[0].clientY - this.list[index].startY
let rotate = moveX / 10
this.list[index].translateX = moveX
this.list[index].translateY = moveY
this.list[index].rotate = rotate
},
touchend(index, e) {
if (!this.list[index].isTouch) return
this.list[index].isTouch = false
if (Math.abs(this.list[index].translateX) > 100) {
// 滑动成功
} else {
// 滑动失败
this.list[index].translateX = 0
this.list[index].translateY = 0
this.list[index].rotate = 0
}
}
}
```
阅读全文