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

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

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 下拉刷新使用时应该注意的问题(卡顿情况,有时候会拉不动)

你可能感兴趣的:(mescroll 导致子元素横向滚动卡顿)