vue项目better-scroll使用注意点

2024年1月19日 164次阅读 来源: long喵

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>
    原文作者：long喵
    原文地址: https://segmentfault.com/a/1190000020352083
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞