1、准備工作
在項目中安裝better-scroll:
npm install --save better-scroll
組件中引入插件
import BScroll from "better-scroll"
2、開始使用插件
dom結構
1 <div class="bscroll" ref="bscroll"> 2 <div class="bscroll-container"></div> 3 </div>
注：dom結構規定這樣，滑動區域的內容放在bscroll-container中，否則，則可能不會成功
部分css
1 .bscroll{ 2 width: 100%; 3 height: 5vH; 4 overflow: hidden; 5 }
注：父級bscroll必須有高度，並且overflow為hidden;
插件使用
1 mounted(){ 2 this.$nextTick(() => { 3 let bscrollDom = this.$refs.bscroll; 4 this.aBScroll = new BScroll(bscrollDom,{}) 5 }) 6 }
注：
1、插件初始化時需要具體元素，所以再DOM結構中使用ref標記元素，以備插件使用;
2、建議放在nextTick方法里面，避免DOM結構未渲染完成從而造成子元素bscroll-container高度計算不准確；
3、建議使用this.bscroll方式定義，以備在其他方法中使用;
按照以上步驟，便可以簡單的使用better-scroll插件了，效果如下圖
3、better-scroll常用參數含義
1 startX: 0 (默認值:0) 表示X軸滾動的起始值 2 startY: 0 (默認值:0) 表示Y軸滾動的起始值 3 scrollY: false (默認值:false) 表示延Y軸滾動 4 scrollX: true (默認值:true) 表示延X軸滾動 5 freeScroll: false (默認值:false) 自由方向滾動 6 scrollbar: false (默認值:false) 滾動條 7 > 注: 當開啟滾動條時，建議直接父級元素position設為 relative；因為滾動條為絕對定位， 8 為避免滾動條相對其祖輩元素定位而出現滾動條不符合預期效果的現象 9 10 click: false (默認值:false) 是否派發點擊事件； 11 > 注：若設置為true仍然無法觸發click事件，可以在click事件中添加如下方法 12 首先在點擊事件中傳入 $event ;示例：@click = "doSome($event)"; 13 然后在事件中如下做法： 14 doSome(event){ 15 if(event._constructed){return true;} 16 <!--在此下面寫入你的事件--> 17 } 18 19 momentum: true (默認值:true) 當快速滑動時是否開啟滑動慣性 20 bounce: true (默認值:true) 是否啟用回彈動畫效果 21 bounceTime: 700 (默認值:700，單位:ms)回彈動畫的動畫時長。 22 probeType: 可選值：1、2、3; (默認值: 0 不派發scroll事件)想要獲取滾動實時位置時派發事件的截流情況 23 1 滾動的時候會派發scroll事件，會截流; 24 2 滾動的時候實時派發scroll事件，不會截流; 25 3 除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件;
4、better-scroll常用方法
1 refresh() -> 重新計算 better-scroll，當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常 2 3 4 scrollTo(x, y, time, easing) -> 滾動到指定的位置; 5 x: X軸位置; 6 y: Y軸位置; 7 time: 到達指定位置所需時間，單位ms; 8 easing: 動畫函數(一般不建議修改) 9 10 scrollBy(x, y, time, easing) -> 相對於當前位置偏移滾動 x,y 的距離； 11 x: 當前位置偏移X軸的距離 12 y: 當前位置偏移Y軸的距離 13 time: 到達偏移位置所需時間，單位ms; 14 easing: 動畫函數(一般不建議修改) 15 16 scrollToElement(el, time, offsetX, offsetY, easing) -> 滾動到指定的目標元素 17 el: 目標元素; 18 time: 到達目標元素所需時間，單位ms; 19 offsetX: 距離目標元素所偏移X軸的距離;設置為true時，到達目標元素中心位置 20 offsetY: 距離目標元素所偏移Y軸的距離;設置為true時，到達目標元素中心位置 21 easing: 動畫函數(一般不建議修改) 22 23 使用示例： 24 this.aBScroll.scrollToElement("li",300);
5、better-scroll 中的srcoll系列事件
1 beforeScrollStart -> 觸發時機：滾動開始之前 2 scrollStart -> 觸發時機：滾動開始時 3 scroll -> 觸發時機：滾動過程中，具體時機取決於選項中的 probeType。 4 scrollCancel -> 觸發時機：滾動被取消。 5 scrollEnd -> 觸發時機：滾動結束。 6 touchEnd -> 觸發時機：鼠標/手指離開。 7 使用示例: 8 this.aBScroll.on('scroll',(pos) => { 9 // 你可以打印一下參數pos中都包含了什么！ 10 <!--寫入你要觸發的事情--> 11 })
想要了解更多參數及其使用方法請前往：better-scroll文檔地址