微信小程序左右滑动事件&&动画效果

<view class="page" > <view class="box_toast" bindtouchstart="touchstart" bindtouchend="touchend" animation="{{animationData}}"></view> <view class="box_bg" bindtouchstart="touchstart" bindtouchend="touchend"></view></view> Page({ data: { nowclientX: "", nowclientY:"", animationData: null }, touchstart(e) { console.log(e) this.setData({ nowclientX: e.changedTouches[0].clientX, nowclientY:e.changedTouches[0].clientY }) }, touchend(e) { console.log(e) let nowclientX = this.data.nowclientX; let clientX = e.changedTouches[0].clientX; let nowclientY=this.data.nowclientY; let clientY = e.changedTouches[0].clientY; let absY=Math.abs(clientY-nowclientY); let absX=Math.abs(clientX - nowclientX); if (absX>absY&&clientX >nowclientX) { console.log("向右滑动") let Animation1= wx.createAnimation({ duration: 500, timingFunction:'linear' }); Animation1.translateX('200vw').step(); this.setData({ animationData: Animation1["export"]() }) // .export(), } else if(absX>absY&&clientX<nowclientX) { console.log("向左滑动") let Animation1= wx.createAnimation({ duration: 500, timingFunction:'linear' }); Animation1.translateX('0vw').step(); this.setData({ animationData: Animation1["export"]() }) } } }) .page{ position: relative; } .box_bg{ width: 100vw; height: 100vh; background-color: black; } .box_toast{ position: absolute; top: 0; left: 0; z-index: 2; width: 80vw; height: 60vh; background-color: red; margin: 20vh 10vw; }