摘要：當設置為會派發(fā)一個事件，我們會給派發(fā)的參數加一個私有屬性，值為。但是自定義的事件會阻止一些原生組件的行為。

安裝
npm install better-scroll --save
引入
import BScroll from "better-scroll"
基礎
better-scroll支持多參數配置，可以在初始化的時候傳入第二個參數
let scroll = new BScroll(".wrapper",{

scrollY: true,
click: true

})
這樣就實現了一個縱向可點擊的滾動效果
參數說明：
scrollY:Boolean
當設置為true的時候，可以開啟縱向滾動
click:Boolean
better-scroll默認會阻止瀏覽器的原生click事件。當設置為true,better-scroll會派發(fā)一個click事件，
我們會給派發(fā)的event參數加一個私有屬性_constructed，值為true。
但是自定義的click事件會阻止一些原生組件的行為。
Demo:
實現效果:

滑動右側左側對應的類別顯示高亮
點擊左側的類別名稱右側滑動到對應的位置
分析：
(1)高亮顯示通過current類來控制，右側滑動到不同位置，更新左側的current顯示
(2)即：實時監(jiān)聽scrollY/將右側每個類的頂部位置記錄下來
goods.vue
左側容器：

...

右側容器：

...

JS部分：
data部分:
data(){

return {
    //存放右側foodWrapper容器中，每一個item(li.food-list-hook)距離頂部的height
    listHeight:[],
    //垂直滾動的距離(實時變化的)
    scrolly:0,
    //商品列表
    goods:[]
}

}
初始化部分:
在created方法中需要進行，數據的獲取，以及左側menuWrapper容器和右側foodWrapper容器的初始化
created(){

//使用vue-resource請求本地數據，模擬后臺數據（注意必須放在static目錄下）
this.$http.get("../static/data.json").then(
    response=>{
     //獲取成功之后執(zhí)行
     response=response.body;
     this.goods=response.goods;
     //為了避免數據請求沒有完成，就執(zhí)行foodWrapper和foodWrapper的scroll初始化
     //以及計算current高亮位置的方法就已經執(zhí)行，其調用應在數據獲取成功之后執(zhí)行
     this.$nextTick(()=>{
         this._initScroll();
         this._calculateHeight()
     })
     
    },
    error=>{
        console.log("調用失敗"+error)
    }
)

}

methods
_initScroll初始化，實現滾動
_initScroll(){

//初始化左側滾動（滑動類默認是沒有點擊的，必須加上click:true才能觸發(fā)事件）
this.menuScroll=new BScroll(this.$refs.menuWrapper,{
    click:true
})
//創(chuàng)建右側的滾動
/*
    probeType:Number 
    默認值0
    可選值：1、2、3
    作用：
    有時候我們需要知道滾動的位置。當probeType為1的時候，會非實時(屏幕滑動超過一定時間后)
    派發(fā)scroll事件;當probeType為2時，會在屏幕滑動的過程中實時的派發(fā)scroll事件
    當probeType為3的時候，不僅在屏幕滑動的過程中，
    而且在momentum滾動動畫運行過程中實時派發(fā)scroll事件
*/
this.foodScroll=new BScroll(this.$refs.foodWrapper,{
    probeType:3
    click:true
});
//為右側foodWrapper綁定scroll事件
this.foodScroll.on("scroll",(pos)=>{
    //scrolly中存放實時滾動的坐標
    this.scrolly=Math.abs(Math.round(pos.y));
})

}
_calculateHeight計算每一個item(li.food-list-hook)距離頂部的height

點擊左側菜單，右側滾動到對應的位置
selectMenu(index,event){

//index與foodWrapper中每個li.food-list-hook的index相對應
//首先去掉better-scroll自帶的點擊事件
if(!event._constructed){
    return;
}
//獲取所有的li.food-list-hook
let foodList=this.$refs.foodWrapper.getElementsByClassName(
    "food-list-hook"
);
//與左側點擊元素的下標相對應的右側的某個li.food-list-hook
let el=foodList[index];
//執(zhí)行點擊后滾動到對應元素的操作
this.foodScroll.scrollToElement(el,300);

}

關于左側menu current高亮位置的計算
computed:{

currentIndex(){
    for(let i=0;iheight&&this.scrolly
}