首先给页面添加 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 为有效区间,小于则认定为无效操作!