javascript -- 轮播实现滑动禁止滚动，滑动禁止轮播，根据用户想法选择刷新或者轮播

2023年6月1日 282次阅读 来源: 谢秀岳

我们日常中很常用到轮播，但是轮播在web端，很多都实现的不尽人意，比如web端的淘宝和app端，轮播的操作和体验也不一样

不限于使用别人的插件，或者自己的组件， 不用修改对方代码。

禁止滚动的话直接是无法禁止的，我们可以通过阻止冒泡实现
as

<div touch...>
  <swipe
    ...
  />
</div>

先上代码，我好去吃饭，代码很简单，不解说。

touchstart(e){
      this.startx = e.touches[0].pageX
      this.starty = e.touches[0].pageY
    },
    touchend(){
      this.touchmoveDirection = 'none'
      this.touchmoveCount = 0
    },
    touchmove(e){
      let dValue = (a, b) => a > b ? a - b : b - a
      let thresholdX = 10
      let beforeActiveValue = 10

      let currenStartX = e.touches[0].pageX
      // 横滑动范围
      let diffValueX = dValue(this.startx, currenStartX)
      // 单次滑动的长度
      this.touchmoveCount += 1

      // 根据前期动作是否是想滚动轮播动机
      if(this.touchmoveCount < beforeActiveValue){
        // 超过指标，判断成滚动
        if(diffValueX > thresholdX){
          this.touchmoveDirection = 'y'
        }
      }
      //  轮播动作阻止冒泡
      (this.touchmoveCount > beforeActiveValue && this.touchmoveDirection == 'none') || e.stopPropagation()
      // debugger
      /*'----' |> console.log 
      diffValueX |> console.log
      this.touchmoveCount |> console.log 
      this.touchmoveDirection |> console.log*/
    }

Tips:
如果出现微信露底问题，需要禁止默认事件。
阀值阔以修改哈

参考链接：
https://mysy.vip

–END–

    原文作者：谢秀岳
    原文地址: https://www.jianshu.com/p/30de63637556
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞