我们日常中很常用到轮播，但是轮播在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--
