better-scroll筆記

安裝
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會派發一個click事件，
咱們會給派發的event參數加一個私有屬性_constructed，值爲true。
可是自定義的click事件會阻止一些原生組件的行爲。
Demo:
實現效果:

滑動右側左側對應的類別顯示高亮
點擊左側的類別名稱右側滑動到對應的位置
分析：
(1)高亮顯示經過current類來控制，右側滑動到不一樣位置，更新左側的current顯示
(2)即：實時監聽scrollY/將右側每一個類的頂部位置記錄下來
goods.vue
左側容器：
<div class="menu-wrapper" ref="menuWrapper">

...

</div>

右側容器：
<div class="foods-wrapper" ref="foodWrapper">

...

</div>

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=>{
     //獲取成功以後執行
     response=response.body;
     this.goods=response.goods;
     //爲了不數據請求沒有完成，就執行foodWrapper和foodWrapper的scroll初始化
     //以及計算current高亮位置的方法就已經執行，其調用應在數據獲取成功以後執行
     this.$nextTick(()=>{
         this._initScroll();
         this._calculateHeight()
     })
     
    },
    error=>{
        console.log("調用失敗"+error)
    }
)

}

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

//初始化左側滾動（滑動類默認是沒有點擊的，必須加上click:true才能觸發事件）
this.menuScroll=new BScroll(this.$refs.menuWrapper,{
    click:true
})
//建立右側的滾動
/*
    probeType:Number 
    默認值0
    可選值：一、二、3
    做用：
    有時候咱們須要知道滾動的位置。當probeType爲1的時候，會非實時(屏幕滑動超過必定時間後)
    派發scroll事件;當probeType爲2時，會在屏幕滑動的過程當中實時的派發scroll事件
    當probeType爲3的時候，不只在屏幕滑動的過程當中，
    並且在momentum滾動動畫運行過程當中實時派發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];
//執行點擊後滾動到對應元素的操做
this.foodScroll.scrollToElement(el,300);

}

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

currentIndex(){
    for(let i=0;i<this.listHeight.length;i++){
        let height=this.listHeight[i];
        let height2=this.listHeight[i+1];
        if(!height2||(this.scrolly>height&&this.scrolly<height2)){
            return i;
        }
    }
    return 0;

}

}