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

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

scrollY: true,
click: true

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

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

...

右側(cè)容器：

...

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

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

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

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

}

methods
_initScroll初始化，實(shí)現(xiàn)滾動(dòng)
_initScroll(){

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

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

點(diǎn)擊左側(cè)菜單，右側(cè)滾動(dòng)到對(duì)應(yīng)的位置
selectMenu(index,event){

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

}

關(guān)于左側(cè)menu current高亮位置的計(jì)算
computed:{

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