Vue中better-scroll外掛的使用
阿新 • • 發佈：2019-01-06
實現原理：父容器固定高度，並設定屬性overflow: hidden，使得子元素高度超出容器後能被隱藏。better-scroll作用在父容器上。
1、npm安裝better-scroll外掛。npm install--save better-scroll
2、在檔案中引入better-scroll。import BScroll from 'better-scroll';
用法：
new BScroll(Dom物件,{//opsitons});
在Vue中要獲得Dom物件，需設定標籤屬性‘v-el’。
例如：<div v-el:betterscroll></div>
獲取dom物件，this.$els.betterscroll
為了讓子元素能被點選，需設定click:true.並可接受此點選事件@click="info($index,$event)"
注意：Vue中資料更新是非同步的，在資料還沒有載入完之前，BScroll是無法獲取目標內容容器的高度的，就會出現無法滾動的現象。
這裡可以用$nextTick()解決。
vue官方是這樣說明的
nextTick應該被用在某些計算屬性或者watch再或者某個按鈕click事件繫結的methods當中。這時，nextTick才能保證你的資料更新完成之後再執行你繫結的函式。
例項用法：
注意：在PC上，點選事件會執行兩次。由於better-scroll派發的事件有event_constructed:true屬性。可以進行處理。
