在vue中将better-scroll封装为组件后遇到无法滚动问题

基本使用略过！！！

使用$nextTick()可以将better-scroll（以下简称BS）延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

this.$nextTick(() => {
                    var scroll = new BScroll(this.$refs.movie_body , {
                        // pullUpLoad: true,
                        // scrollbar: true,
                        // pullDownRefresh: true,
                        click: true,
                        probeType: 1
                    })

 

重点是在于要是多个页面中使用到BS呢？封装成一个组件之后遇到刷新后无法滚动的问题。

图一，将BS封装为组件的DOM结构，slot里分发的内容其实是ul

 

 

 Chrome渲染的结构

 

 

 上图，DOM的确已经出现了css样式，但是仍旧不滚动。

参考了许多帖子仍旧未解决我的问题，其实我也有了一些猜测，可能是类似swiper初始化过早的问题，然后添加延时成功解决。

mounted(){
        setTimeout(() => {
        var scroll = new BScroll( this.$refs.wrapper, {
                click: true,
                probeType: 1,
        });
        // scroll.on('scroll',(pos) => {
        //     this.handleToScroll(pos)
        // });
        // scroll.on('touchEnd',(pos) => {
        //     this.handleToTouchEnd(pos)
        // })
        },500)
    }