vue之better-scroll

Posted 2021-02-10 qingsq

1.安装better-scrool且在组件中引用

（1）

npm i better-scrool -S

（2）

import BScroll from "better-scroll"

 

2.使用

dom结构

<div>
    <div  ref="wscroll"></div>
</div>

注意！父级div必须有一定高度，因为只有子级div超过父级div高度，滚动条才会出现。

当 子级 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理

mounted(){
    this.$nextTick(()=>{
        if(!this.scroll){
            this.scroll=new BScroll(this.$refs.wscroll,{
　　　　　　　　　 //开启点击事件 默认为false
                click:true
            });
        }else if(!this.$refs.wscroll){
            return;
        }else {
            this.scroll.refresh()
        }
    })  
}      

另外还要说一下：dom结构中的ref="scroll"和mounted里的this.$refs.wscroll，一般操作DOM元素，需document.querySelector（""）等获取这个dom节点。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的div上绑定"wscroll"(自己定义的），然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.wscroll  这样就可以减少获取dom节点的消耗了。

更多better-scroll参数与方法：http://ustbhuangyi.github.io/better-scroll/doc/api.html