vue项目better-scroll使用注意点

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();
        })
    }
}

广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

2.拆分better-scroll组件

scroller.vue

vue 感知不到slot变化，但能感知数据变化

" title="" data-original-title="复制">

<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>