收藏
回答

touch事件实现左右滑动,如何禁止大于1个手指?

刚刚接触小程序,还不是很了解事件的相关特性, 麻烦大佬们指点一下。

关于touch实现左右滑动切换页面,多个手指触碰屏幕后再一个手指滑动屏幕卡顿或者失效的问题怎么解决。

view 绑定了touchStart 和 touchEnd

方法写在了touchEnd里面的。

  /**
   * 触摸开始事件
   */
  touchStart: function(event) {
    touchDot = event.touches.pageX; // 获取触摸时的原点// 使用js计时器记录时间    
    interval = setInterval(function() {
      time++;
    }, 100);
  },

  /**
   * 触摸结束事件
   */
  touchEnd: function(event) {
    let touchMove = event.changedTouches.pageX;
    // 向左滑动   if (touchMove - touchDot <= -100 && time < 10) {if (!this.data.first) {
        this.onPrevious()
      }
    }
    // 向右滑动   if (touchMove - touchDot >= 100 && time < 10) {if (!this.data.latest) {
        this.onNext()
      }
    }
    clearInterval(interval); // 清除setIntervaltime = ;
  },


实际效果,单个手指滑动没有问题,但当用户多个手指触碰屏幕滑动后,可以实现切换,滑动完成再一个手指滑动的时候没有有效果,或者要滑动N次才触发一次。

最后一次编辑于  2019-12-19
回答关注问题邀请回答
收藏

1 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-12-20

    弄个代码片段吧

    2019-12-20
    赞同
    回复 5
    • Tony
      Tony
      2019-12-20
      好的。
      2019-12-20
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-12-20回复Tony
      event.touches.length > 1就是多个手指
      2019-12-20
      回复
    • Tony
      Tony
      2019-12-20回复o0o有脾气的酸奶
      好的, 我试试呢
      2019-12-20
      回复
    • Tony
      Tony
      2019-12-21
      解决了,我把业务逻辑放在touchMove函数里面就好了,之前放在touchEnd里面的, touchEnd会监听到最后一个手指离开屏幕,所以触发逻辑的时候挂了。
      2019-12-21
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2019-12-21回复Tony
      2019-12-21
      回复
登录 后发表内容
问题标签