首先給頁面添加 touch 事件

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

　　然后定義一個合理區間進行判斷,用戶當前是上下滑動看書還是左右滑動變換章節.

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('無效')}} }

　　這里面根據用戶如果上下滑動的幅度超過 50 即認定為用戶當前行為是上下翻看內容,否則就根據用戶左右滑動的幅度進行判斷,取值左右 100 為有效區間,小于則認定為無效操作!

轉載于:https://www.cnblogs.com/gitByLegend/p/11509462.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。