收藏
评论

微信开发者工具滑动出现的BUG

使用bindtouchstart、bindtouchend、bindtouchmove绑定,当触摸点移动到窗口之外的时候,最后不会触发bindtouchend事件,但是这个在手机上测试的时候是正常的

最后一次编辑于  2018-05-28  (未经腾讯允许,不得转载)
复制链接收藏赞 0

4 个评论

  • 娇华
    娇华
    2018-05-28

    你好,能否详细描述是使用哪个组件?方便给个代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html?search-key=%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5)

    2018-05-28
    赞同
    回复 1
    • 石成鹏
      石成鹏
      2018-05-29
      <view class="body" bindtouchstart="touchMove" bindtouchend="touchMove" bindtouchmove="touchMove"></view>
      .body{
        width: 100%;
        height: 400px;
        background-color: blanchedalmond;
      }
      const app = getApp()
       
      Page({
        data: {
          touchData:{
            intervalNum:0,
            times:0,
            touchDot:{}
          }
        },
        onLoad: function () {
          console.log('代码片段是一种迷你、可分享的小程序或小游戏项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档:')
          console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
        },
        touchMove(ev) {
          console.log(ev);
          var self = this;
          switch (ev.type) {
            case "touchstart":
              self.data.touchData.touchDot.start = ev.changedTouches[0]
              self.data.touchData.intervalNum = setInterval(() => {
                self.data.touchData.times++;
                console.log(self.data.touchData.times);
              }, 100);
              break;
            case "touchend":
              clearInterval(self.data.touchData.intervalNum);
              if (self.data.touchData.times < 5) {
                self.data.touchData.touchDot.end = ev.changedTouches[0]
                self.ontouchMove(self.data.touchData.touchDot.start, self.data.touchData.touchDot.end, {
                  'left': () => {
                    console.log('左滑动');
                     
                  }, 'right': () => {
                    console.log('右滑动');
                     
                  }
                });
              }
              self.data.touchData.times = 0;
              break;
            case "touchcancel":
              clearInterval(self.data.touchData.intervalNum);
              if (self.data.touchData.times < 5) {
                self.data.touchData.touchDot.end = ev.changedTouches[0]
                self.ontouchMove(self.data.touchData.touchDot.start, self.data.touchData.touchDot.end, {
                  'left': () => {
                    console.log('左滑动');
                    self.switching({ target: { id: "1" } })
                  }, 'right': () => {
                    console.log('右滑动');
                    self.switching({ target: { id: "0" } })
                  }
                });
              }
              self.data.touchData.times = 0;
              break;
          }
        },
        ontouchMove(start, end, options) {
          // console.log(start,end);
          //左滑动判断
          if (start.pageX > end.pageX) {
            options.left ? options.left() : ''
          } else if (start.pageX < end.pageX) {
            options.right ? options.right() : ''
          } else if (start.pageY > end.pageY) {
            options.up ? options.up() : ''
          } else if (start.pageY < end.pageY) {
            options.down ? options.down() : ''
          }
        }
      })

      当我在微信开发者工具触摸点活动到活动区域之外时,不会触发touchend事件或者是touchcancel事件



      2018-05-29
      回复
  • 卢霄霄
    卢霄霄
    2018-05-31

    嗯,模拟器上鼠标按着移出去都不会触发end事件,一般的安卓模拟器,iOS模拟器,都有类似的问题

    2018-05-31
    赞同
    回复 1
    • 石成鹏
      石成鹏
      2018-05-31

      是的,这个BUG在手机上测试是可以,所以我也就忽略掉了

      2018-05-31
      回复