主要在touchmove事件中阻止事件的默认行为,if(disX > disY) {e.preventDefault()}事件是关键。另外,如果子元素中不存在滚动条的话,是可以直接在touch事件后加 .prevent 的,而不用在touch事件处理方法中去阻止默认事件。
<div
@touchstart="start($event,key)"
@touchmove="move($event,key)"
@touchend="end($event,key)"
ref="tabPage"
v-for="(value, key) in devInfo"
:key="key"
class="tab-page"
>
<!-- 省略 -->
</div>
// touch开始事件
start(e, key) {
e = e || event;
if (e.touches.length == 1) {
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
}
// console.log(e);
},
// touchmove事件
move(e, key) {
e = e || event;
if (e.changedTouches.length == 1) {
let moveX = e.changedTouches[0].clientX;
let m