最近在学Vue框架,在初始化Better Scroll插件时遇到了内容不能滚动的问题。
于是在网上搜了几下大概了解到Better Scroll只有在内容高度大于容器高度时滚动。Better Scroll的容器里内容如果是ajax异步获取的,在获取数据之前初始化了Better Scroll就会导致内容高度比容器高度小,从而不会滚动。记录一下两种解决办法。
1.我们只需用watch监听获取的数据,然后里面运行一下this.scroll.refresh()就能解决。
mounted () {
this.scroll = new Bscroll(this.$refs.wrapper)
},
watch: {
cities () {
this.$nextTick(() => {
this.scroll.refresh();
})
}
}
2.直接在setTimeout里实例化Better Scroll,这样可以先获取完数数据,有了内容高度大于容器高度前提,就可以滚动。
setTimeout(()=>{
this.scroll = new Bscroll(this.$refs.wrapper)},0)