原⽣⼩程序左右滑动切换页⾯事件
注意此滑动只针对于内容块⼀致的页⾯，如有需求⾃⾏更改哦
⾃⼰遇见的问题，记录下来,⼤家要有什么好的⽅法欢迎分享
⼩程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。
这三个事件最重要的属性是startX和startY，表⽰X，Y坐标。
touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;
1：在wxml⽂件中绑定事件
<view class='header_content'bindtouchstart="touchstart"bindtouchmove="touchmove"bindtouchend="tochend"> {{内容}}
</view>
2：在js⽂件中处理左右滑动逻辑
data:{
//滑动坐标
startX:0,
startY:0,
direction:null,//活动⽅向 L 左滑  R 右滑
},
//开始滑动
touchstart:function(e){
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY
})
},
//滑动中判断滑动⽅向
touchmove:function(e){
let startX =this.data.startX // 开始x坐标
let startY =this.data.startY // 开始y坐标
let touchMoveX = e.changedTouches[0].clientX // 活动变化坐标let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标let angle =this.angle({
X: startX,
Y: startY
},{
X: touchMoveX,
Y: touchMoveY
})
//滑动⾓度超过45retrun
console.log(Math.abs(angle),"Math.abs(angle)")
if(Math.abs(angle)>45)return
if(touchMoveX > startX){//右滑
this.setData({
direction:'R'
})
}else{
this.setData({//左滑
direction:'L'
})
}
},
// 滑动⾓度限制
angle:function(start, end){
var _X = end.X- start.X,
_Y = end.Y- start.Y
//返回⾓度 / Math,atan()返回数据的反正切值
return360* Math.atan(_Y / _X)/(2* Math.PI)
},
// 滑动结束
tochend:function(e){
let that =this
if(this.data.direction =='R'){// 左滑相当于上⼀页
console.log("左滑")//这⾥⼤家可以根据需求调⽤接⼝}else if(this.data.direction =='L'){//右滑相当于下⼀页
console.log("右滑")//这⾥⼤家可以根据需求调⽤接⼝}else{// 相当于滑动不成⽴，清空driection
this.setData({
direction:''
})
}htmlradio添加切换事件
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。