轉載。 https://blog.csdn.net/qq_22557797/article/details/78866328

1、準備工作

在專案中安裝better-scroll:

npm install --save better-scroll

• 1

元件中引入外掛

import BScroll from "better-scroll";

• 1

2、開始使用外掛

dom結構

<div class="bscroll" ref="bscroll">
    <div class="bscroll-container"></div>
</div>

注：dom結構規定這樣，滑動區域的內容放在bscroll-container中，否則，則可能不會成功

部分css

.bscroll{
    width: 100%;
    height: 5vH;
    overflow: hidden;
}

注：父級bscroll必須有高度，並且overflow為hidden;

外掛使用

mounted(){
    this.$nextTick(() => {
        let bscrollDom = this.$refs.bscroll;
        this.aBScroll = new BScroll(bscrollDom,{})
    })   
}

注： 
1、外掛初始化時需要具體元素，所以再DOM結構中使用ref標記元素，以備外掛使用; 

2、建議放在nextTick方法裡面，避免DOM結構未渲染完成從而造成子元素bscroll-container高度計算不準確； 
3、建議使用this.bscroll方式定義，以備在其他方法中使用;

按照以上步驟，便可以簡單的使用better-scroll外掛了，效果如下圖

3、better-scroll常用引數含義

startX: 0 (預設值:0) 表示X軸滾動的起始值
startY: 0 (預設值:0) 表示Y軸滾動的起始值
scrollY: false (預設值:false) 表示延Y軸滾動
scrollX: true (預設值:true) 表示延X軸滾動
freeScroll: false (預設值:false) 自由方向滾動
scrollbar: false (預設值:false) 滾動條
> 注: 當開啟滾動條時，建議直接父級元素position設為 relative；因為滾動條為絕對定位，
為避免滾動條相對其祖輩元素定位而出現滾動條不符合預期效果的現象

click: false (預設值:false) 是否派發點選事件；
> 注：若設定為true仍然無法觸發click事件，可以在click事件中新增如下方法
首先在點選事件中傳入 $event ;示例：@click = "doSome($event)";
然後在事件中如下做法：
doSome(event){
    if(event._constructed){return true;}
    <!--在此下面寫入你的事件-->
}

momentum: true (預設值:true) 當快速滑動時是否開啟滑動慣性
bounce: true (預設值:true) 是否啟用回彈動畫效果
bounceTime: 700 (預設值:700，單位:ms)回彈動畫的動畫時長。 
probeType: 可選值：1、2、3; (預設值: 0 不派發scroll事件)想要獲取滾動實時位置時派發事件的截流情況
    1 滾動的時候會派發scroll事件，會截流;
    2 滾動的時候實時派發scroll事件，不會截流; 
    3 除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件;
 

4、better-scroll常用方法

refresh() -> 重新計算 better-scroll，當 DOM 結構發生變化的時候務必要呼叫確保滾動的效果正常


scrollTo(x, y, time, easing) -> 滾動到指定的位置;
    x: X軸位置;
    y: Y軸位置;
    time: 到達指定位置所需時間，單位ms; 
    easing: 動畫函式(一般不建議修改)

scrollBy(x, y, time, easing) -> 相對於當前位置偏移滾動 x,y 的距離；
    x: 當前位置偏移X軸的距離
    y: 當前位置偏移Y軸的距離
    time: 到達偏移位置所需時間，單位ms; 
    easing: 動畫函式(一般不建議修改)

scrollToElement(el, time, offsetX, offsetY, easing) -> 滾動到指定的目標元素
    el: 目標元素;
    time: 到達目標元素所需時間，單位ms; 
    offsetX: 距離目標元素所偏移X軸的距離;設定為true時，到達目標元素中心位置
    offsetY: 距離目標元素所偏移Y軸的距離;設定為true時，到達目標元素中心位置
    easing: 動畫函式(一般不建議修改)

使用示例：
this.aBScroll.scrollToElement("li",300);

5、better-scroll 中的srcoll系列事件

beforeScrollStart -> 觸發時機：滾動開始之前
scrollStart -> 觸發時機：滾動開始時
scroll -> 觸發時機：滾動過程中，具體時機取決於選項中的 probeType。
scrollCancel -> 觸發時機：滾動被取消。
scrollEnd -> 觸發時機：滾動結束。
touchEnd -> 觸發時機：滑鼠/手指離開。

使用示例: 
this.aBScroll.on('scroll',(pos) => {
    // 你可以列印一下引數pos中都包含了什麼！
    <!--寫入你要觸發的事情-->
})

好了，本文到這裡就結束了，在專案中有大量的滾動區域，所以如果沒有特殊事件的僅僅使用滾動效果的時候，建議寫成一個元件，然後結合元件插槽，省時省力，何樂不為，感謝大家的閱讀；

想要了解更多前端方面的知識？微信搜尋關注【大前端js】公眾號，更有免費海量視訊相送，在這裡與您一起交流分享前端方面的各種知識