vue项目betterscroll使用注意点

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>