1.应该在何时创建BScroll对象
1)
created : 中请求数据,ajax是异步的,这个时候可能mounted已经执行完了,也就是dom挂载完了,但数据还没请求回来,无法获取到内部元素(数据渲染出来的dom)高度. 无法渲染内部元素,无法滚动
2)
updated:数据发生改变时执行;数据改变,dom也要重新渲染,并执行updated,但无法保证是先dom渲染还是先updated,
//解决:
this.$nextTick(()={
//操作
this.scroll = new BScroll(this.$refs.className,{})
})
3)最佳方式:
mounted() {
this.scroll = new BScroll(this.$refs.scrollWrapper,{})
}
watch: {
shuju() {
this.$nextTick(() => {
this.scroll.refresh();
})
}
}
2.拆分better-scroll组件----//scroller.vue
<template>
<div ref="wrapper">
<div>
//vue 感知不到slot变化,但能感知数据变化
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: ['shuju'],
mounted() {
this.scroll = new BScroll(this.$refs.wrapper,{})
},
watch: { //保障数据加载dom渲染,刷新
shuju() {
this.$nextTick(() => {
this.scroll.refresh();
})
}
}
}
</script>
<style>
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。