better-scroll不能滚动的原因
2018-07-23 本文已影响0人
从小就很瘦
- 需要DOM加载完成后才能正确应用. vue中应用在$nextTick中,异步初始化。
- 子元素高度需要超过父元素。而且父元素需要设置高度。这才是better-scroll能够滚动的原理。
- better-scroll在使用的时候,滚动只作用于第一个子元素,其它的元素都会被忽略。在vue中,获取的ref是seller,那么它的子元素seller-wrapper才是需要滚动的部分。
<div class="seller" ref="seller">
<div class="seller-wrapper">
...这里才是内容
</div>
</div>
- 还有一种可能就是隐藏切换显示。这样都会导致插件参数的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();
};
});