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

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

作者: 胖胖爱吃鱼啊 | 来源:发表于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