美文网首页
小程序 监听左滑手势

小程序 监听左滑手势

作者: 光明大兄弟 | 来源:发表于2020-07-11 23:41 被阅读0次

    实现从当前页面左滑跳转到当前页面或其他页面

    <view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    
    let isNavigateed = false, // 是否已经跳转过 *跳转到当前页面需要
         isTouchMove = false // 手势是否为滑动 *这个字段必须 解决用户使用点击进行跳转bug
    
     data: {
        touchS: [0, 0],
        touchE: [0, 0],
        screenWidth: wx.getSystemInfoSync().screenWidth // 获取当前设备的宽度
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        isNavigateed = isTouchMove = false // 如果是跳转到当前页面需要重置数据
      },
      // 记录起始位置
      touchStart: function (e) {
        let sx = e.touches[0].pageX
        let sy = e.touches[0].pageY
        this.data.touchS = [sx, sy]
      },
      // 移动
      touchMove: function (e) {
        isTouchMove = true
        let sx = e.touches[0].pageX
        let sy = e.touches[0].pageY
        this.data.touchE = [sx, sy]
      },
      // 结束位置
      touchEnd: function (e) {
        let start = this.data.touchS
        let end = this.data.touchE
        // this.data.screenWidth - start[0] < 10 意义为用户尽量为从设备最右侧开始滑动
        if (start[0] > end[0] + 100 && !isNavigateed && isTouchMove && this.data.screenWidth - start[0] < 10) {
          isNavigateed = true;
          wx.navigateTo({
            url: '/pages/photograph/photograph',
          })
        }
      },
    

    相关文章

      网友评论

          本文标题:小程序 监听左滑手势

          本文链接:https://www.haomeiwen.com/subject/ewbwcktx.html