我們?nèi)粘Ｖ泻艹Ｓ玫捷啿ィ禽啿ピ趙eb端册着，很多都實(shí)現(xiàn)的不盡人意拴孤，比如web端的淘寶和app端，輪播的操作和體驗(yàn)也不一樣
不限于使用別人的插件甲捏，或者自己的組件演熟， 不用修改對(duì)方代碼。
禁止?jié)L動(dòng)的話直接是無(wú)法禁止的，我們可以通過(guò)阻止冒泡實(shí)現(xiàn)
as
<div touch...>
<swipe
...
/>
</div>
先上代碼芒粹，我好去吃飯兄纺，代碼很簡(jiǎn)單，不解說(shuō)化漆。
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
// 橫滑動(dòng)范圍
let diffValueX = dValue(this.startx, currenStartX)
// 單次滑動(dòng)的長(zhǎng)度
this.touchmoveCount += 1
// 根據(jù)前期動(dòng)作是否是想滾動(dòng)輪播動(dòng)機(jī)
if(this.touchmoveCount < beforeActiveValue){
// 超過(guò)指標(biāo)估脆，判斷成滾動(dòng)
if(diffValueX > thresholdX){
this.touchmoveDirection = 'y'
}
}
// 輪播動(dòng)作阻止冒泡
(this.touchmoveCount > beforeActiveValue && this.touchmoveDirection == 'none') || e.stopPropagation()
// debugger
/*'----' |> console.log
diffValueX |> console.log
this.touchmoveCount |> console.log
this.touchmoveDirection |> console.log*/
}
Tips:
如果出現(xiàn)微信露底問(wèn)題，需要禁止默認(rèn)事件获三。
閥值闊以修改哈
參考鏈接：
https://mysy.vip
--END--
