<template>
<view class="data_list" @touchstart="touchStart" @touchend="touchEnd" :animation="animationData">
<view class="" v-for="item in 120">
AAA
</view>
</view>
</template>
```js
<script>
export default {
data() {
return {
startX: 0,
startY: 0,
animationData: {},
}
},
onLoad() {
this.animation = uni.createAnimation({
timingFunction: 'ease',
duration: 120
})
},
methods: {
touchStart(event) {
this.startX = event.touches[0].pageX;
this.startY = event.touches[0].pageY;
},
touchEnd(event) {
let deltaX = event.changedTouches[0].pageX - this.startX;
let deltaY = event.changedTouches[0].pageY - this.startY;
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 60) {
if (deltaX < 0) {
this.getRight()
} else if (deltaX > 0) {
this.getLeft()
} else {
}
} else {
}
},
getRight() {
this.animation.translateX('-100%').step()
.opacity(0).step({
duration: 10
})
.translateX('100%').step({
duration: 10
})
.translateX(0).opacity(1).step()
this.animationData = this.animation.export()
setTimeout(() => {
this.animationData = {}
}, 250)
},
getLeft() {
this.animation.translateX('100%').step()
.opacity(0).step({ //再使滑块部分透明
duration: 10
})
.translateX('-100%').step({ //然后趁透明横向向左移至-100%
duration: 10
}).translateX(0).opacity(1).step()
this.animationData = this.animation.export()
setTimeout(() => {
this.animationData = {}
}, 250)
},
},
}
</script>