vue項目中better-scroll的使用

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