mescroll 导致子元素横向滚动卡顿

配置 up 的 isBounce 为 false, 禁止 ios 的回弹效果导致的

<div id="mescroll" class="mescroll">
  <div>
    <van-tabs
      v-model="active"
      swipeable
      animated
      @change="changeEvent(active)"
      @click="clickEvent"
      ref="vanx"
    >
      <van-tab
        v-for="(item,index) in typeAry"
        :title="item.name"
        :key="index"
      >
        
          <!-- {{ item.name }} 内容? -->

      </van-tab>
    </van-tabs>
  </div>
</div>
this.$nextTick(function() {
  // DOM 现在更新了
  // `this` 绑定到当前实例
  console.log("ref1", this.$refs.vanx);
  console.log("ref2", this.$refs.vanx.$el.childNodes[0]);

  // 报错  -- 伪数组不能直接 push

  // that.$refs.vanx.$el.childNodes[0].classList.push("ceshixxx");

  // ref 4 ref5 打印可以看到 界面视图看不到  无效果
  // this.$refs.vanx.$el.childNodes[0].className += " mescroll-touch";
  // this.$refs.vanx.$el.childNodes[0].className += " ceshi";
  // that.$refs.vanx.$el.childNodes[0].setAttribute('class','ceshi');
  this.$refs.vanx.$el.childNodes[0].classList.add("ceshi");

  // 无效 报错
  // that.$refs.vanx.classList.add("mescroll-touch");

  console.log("ref3", this.$refs.vanx);
  console.log("ref4", this.$refs.vanx.$el.childNodes[0].className);
  console.log(
    "ref5",
    document.getElementsByClassName("van-tabs__wrap")
  );
  this.ce = 1;
});

// 最终还是原生添加
let list = document.getElementsByClassName("van-tabs__nav")[0];
list.classList.add("mescroll-touch");
console.log("哦豁", list);

注意: 配置 up 的 isBounce 为 false 之后,会禁止 window 的 touchmove 事件,从而阻止 iOS 的回弹效果.
此时除了 mescroll 的 div 可以滑动,其他的区域匀无法滑动;
如果你希望 mescroll 之外的某个 div 可以滑动,则可为这个 div 加入 mescroll-touch 的样式即可;

比如你希望顶部导航菜单 class="nav-top" 的 div 可接收 touchmove 事件,则 class="nav-top mescroll-touch"
如果添加 mescroll-touch-x 则可水平滑动;如果添加 mescroll-touch-y 则可上下滑动

参考:mescroll.js 下拉刷新使用时应该注意的问题(卡顿情况,有时候会拉不动)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容