原生小程序左右滑动切换页面事件

最新推荐文章于 2024-06-27 09:54:38 发布

weixin_47403101

最新推荐文章于 2024-06-27 09:54:38 发布

阅读量1.6k

点赞数 3

文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_47403101/article/details/118731643

版权

本文介绍了如何在微信小程序中实现左右滑动触屏事件，主要涉及touchstart、touchmove和touchend三个事件。通过监听这些事件，获取并比较滑动开始和结束时的坐标，判断滑动方向，从而实现页面的左右滑动功能。滑动角度超过45度则忽略，否则根据滑动方向执行相应操作，如模拟翻页效果。

摘要由CSDN通过智能技术生成

注意此滑动只针对于内容块一致的页面,如有需求自行更改哦
自己遇见的问题,记录下来,大家要有什么好的方法欢迎分享

微信小程序的左右滑动触屏事件，主要有三个事件：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()返回数据的反正切值
     return 360 * 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: ''
       })
     }
   },