美文网首页
better-scroll不能滚动的原因

better-scroll不能滚动的原因

作者: 从小就很瘦 | 来源:发表于2018-07-23 21:33 被阅读0次
  1. 需要DOM加载完成后才能正确应用. vue中应用在$nextTick中,异步初始化。
  2. 子元素高度需要超过父元素。而且父元素需要设置高度。这才是better-scroll能够滚动的原理。
  3. better-scroll在使用的时候,滚动只作用于第一个子元素,其它的元素都会被忽略。在vue中,获取的ref是seller,那么它的子元素seller-wrapper才是需要滚动的部分。
<div class="seller" ref="seller">
    <div class="seller-wrapper">
        ...这里才是内容
    </div>
</div>
  1. 还有一种可能就是隐藏切换显示。这样都会导致插件参数的scrollerHeight:0。此时需要加上click:true,使better-scroll支持点击事件,再调用下refresh()重新渲染DOM就行了。
    this.$nextTick(()=>{
                  if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.rongqi, {
                      click: true
                    });
                  } else {
                    this.scroll.refresh();
                  };
            });

相关文章

网友评论

      本文标题:better-scroll不能滚动的原因

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