vue.js移动端touch事件左右滑动与uc浏览器冲突的解决办法,并解决滑动页面有垂直滚动条时无法滚动的问题

本文介绍了在Vue.js移动端项目中,处理touch事件左右滑动时遇到与UC浏览器冲突的解决方案。关键在于touchmove事件中通过判断水平方向位移disX大于垂直位移disY时调用e.preventDefault()阻止默认行为。同时,当子元素无滚动条时,可以在touch事件后直接使用.prevent来防止冲突。
摘要由CSDN通过智能技术生成

主要在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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值