首先給頁(yè)面添加 touch 事件

<view class="text-area" @touchstart="start" @touchend="end"></view>

　　然后定義一個(gè)合理區(qū)間進(jìn)行判斷,用戶(hù)當(dāng)前是上下滑動(dòng)看書(shū)還是左右滑動(dòng)變換章節(jié).

start(e){this.startData.clientX=e.changedTouches[0].clientX;this.startData.clientY=e.changedTouches[0].clientY; }, end(e){// console.log(e)const subX=e.changedTouches[0].clientX-this.startData.clientX;const subY=e.changedTouches[0].clientY - this.startData.clientY;if(subY>50 || subY<-50){console.log('上下滑')}else{if(subX>100){console.log('右滑')}else if(subX<-100){console.log('左滑')}else{console.log('無(wú)效')}} }

　　這里面根據(jù)用戶(hù)如果上下滑動(dòng)的幅度超過(guò) 50 即認(rèn)定為用戶(hù)當(dāng)前行為是上下翻看內(nèi)容,否則就根據(jù)用戶(hù)左右滑動(dòng)的幅度進(jìn)行判斷,取值左右 100 為有效區(qū)間,小于則認(rèn)定為無(wú)效操作!

轉(zhuǎn)載于:https://www.cnblogs.com/gitByLegend/p/11509462.html

總結(jié)

以上是生活随笔為你收集整理的uni-app 手指左右滑动实现翻页效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。