微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

wxml:

rush:js;"> etouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 100%px; height : 40px;"> {{text}}

wxss:

rush:js;"> .ball { Box-shadow:2px 2px 10px #AAA; border-radius: 20px; position: absolute; }

js:

Math.abs(ty)) { if (tx < 0) text = "向左滑动" else if (tx > 0) text = "向右滑动" } //上下方向滑动 else { if (ty < 0) text = "向上滑动" else if (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: "没有滑动",})

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

原文地址:https://www.jb51.cc/weapp/35854.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。