微客导航 » 文章资讯 » 微信小程序页面滑动事件的实例详解

微信小程序页面滑动事件的实例详解

2023-09-23 08:52:05 304

微信小程序——页面滑动事件

wxml:


{{text}}

wxss:

.ball{
box-shadow:2px2px10px#AAA;
border-radius:20px;
position:absolute;
}

js:

//js
Page({
data:{
lastX:0,//滑动开始x轴位置
lastY:0,//滑动开始y轴位置
text:"没有滑动",
currentGesture:0,//标识手势
},
//滑动移动事件
handletouchmove:function(event){
varcurrentX=event.touches[0].pageX
varcurrentY=event.touches[0].pageY
vartx=currentX-this.data.lastX
varty=currentY-this.data.lastY
vartext=""
//左右方向滑动
if(Math.abs(tx)>Math.abs(ty)){
if(tx<0)
text="向左滑动"
elseif(tx>0)
text="向右滑动"
}
//上下方向滑动
else{
if(ty<0)
text="向上滑动"
elseif(ty>0)
text="向下滑动"
}

//将当前坐标进行保存以进行下一次计算
this.data.lastX=currentX
this.data.lastY=currentY
this.setData({
text:text,
});
},

//滑动开始事件
handletouchtart:function(event){
this.data.lastX=event.touches[0].pageX
this.data.lastY=event.touches[0].pageY
},
//滑动结束事件
handletouchend:function(event){
this.data.currentGesture=0;
this.setData({
text:"没有滑动",
});
},
})

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

微信小程序 页面滑动事件的实例详解

热门推荐

随机推荐

微信小程序页面滑动事件的实例详解