标签：安装 str roo java title port 操作 容器 font
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
标签：安装 str roo java title port 操作 容器 font
原文地址：https://www.cnblogs.com/Qingsq/p/10425166.html
