小程序 监听左滑手势

2020-07-11  本文已影响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',
      })
    }
  },
上一篇下一篇

猜你喜欢

热点阅读