美文网首页
mescroll 导致子元素横向滚动卡顿

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

作者: 醉笙情丶浮生梦 | 来源:发表于2019-07-05 14:38 被阅读0次

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

相关文章

网友评论

      本文标题:mescroll 导致子元素横向滚动卡顿

      本文链接:https://www.haomeiwen.com/subject/hutehctx.html