BetterScroll官网:安装 | BetterScroll 2.0
最近在研究betterScroll,直接根据官网提供的示例,使用cdn资源引入,但是却无法滚动,我确定自己是一模一样复制下来的啊。
结果如下图演示,一模一样的代码啊(最怕这个了。。)首次加载不行,但是比如缩小或者放大视图大小就可以了。。。
解决思路:
1. content宽度小于wrapper宽度,但是看下图:不存在这种情况!!!
我试着打印了首次加载时候的this.bs.scrollerWidth ,但是不是下图所示的3806.92,而是当前屏幕显示的内容宽度,这个我也搞不懂,怀疑是dom加载问题
2 .上一步怀疑是dom渲染没结束,然后我把创建BScroll的部分放在了this.$nextTick,但是结果依旧如此。
this.$nextTick(()=>{
bs = BetterScroll.createBScroll(this.$refs.scroll, {
scrollX: true,
probeType: 3 // listening scroll event
})
})
最终的解决方式:
设置了bs.hasHorizontalScroll = true这样就没有问题了。
this.bs = BetterScroll.createBScroll(this.$refs.scroll, {
scrollX: true,
probeType: 3 // listening scroll event
})
// this.bs.refresh();
// console.log(this.bs)
this.bs.hasHorizontalScroll = true;
小声逼逼:为啥官网的直接复制出来都不行。我不理解。