美文网首页
【微信小程序】左右滑动切换事件

【微信小程序】左右滑动切换事件

作者: 胖胖爱吃鱼啊 | 来源:发表于2021-09-30 00:50 被阅读0次
html
<view bindtouchstart="startEvent" bindtouchend="endEvent"></view>
js
  //data定义
  data: {
    startPageX: 0,
  },

  // 滑动手势开始事件
  startEvent(event) {
    if (event.changedTouches[0].pageX) {
      this.data.startPageX = event.changedTouches[0].pageX
    } else {
      this.data.startPageX = event.changedTouches[0].x
    }
  },
  // 滑动手势结束事件
  endEvent(event) {
    let endPageX = 0
    if (event.changedTouches[0].pageX) {
      endPageX = event.changedTouches[0].pageX
    } else {
      endPageX = event.changedTouches[0].x
    }
    const moveX = endPageX - this.data.startPageX
    if (Math.abs(moveX) < 30) return
    if (moveX > 0) {
      // 右滑
      this.prev()  //这里写你的右滑方法
    } else {
      // 左滑
      this.next()  //这里写你的左滑方法
    }
  },

相关文章

网友评论

      本文标题:【微信小程序】左右滑动切换事件

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