vue项目better-scroll使用注意点

yhunii 2019-09-11

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>

相关推荐

lyjava / 0评论 2020-07-30