餓了麼項目---8、關于iscoll的擴充 better scroll的使用（1)

本筆記重點:

- 如何在項目中引入Vue的擴充‘better scroll’

- 關于better scroll 的API

- 餓了麼項目中應用點–讓内容在中間區域滾動

- 餓了麼項目中應用點–通過一側點選事件滾動另一側内容

一、better scroll的使用

首先貼上改擴充插件的github托管位址：

https://github.com/ustbhuangyi/better-scroll

關于其引用與API的使用已經解釋的非常詳細了

1.1 引入better scroll

1.1.1 在你的項目依賴package.json中添加better scroll的依賴。

"dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.3.1",
    "vue-resource": "1.3.4",
    "element-ui": "^1.0.0",
    "better-scroll": "^0.1.7"
  }
           

cmd打開指令視窗 輸入：npm install 或者 使用淘寶鏡像cnpm 安裝

1.1.2 在項目中使用

項目需要使用到的vue元件中,引入 better-scroll，并将better-scroll對象執行個體化，你想要使哪一個代碼塊有此滾動功能，就将其執行個體化。

執行個體化傳參：

let scroll = new BScroll(DOM對象, option配置傳參) ;

參數說明：

DOM對象：你要使其滾動的那個DOM對象，例如document.getElementById(‘wrapper’)；

（在vue 中通過ref屬性注冊DOM節點資訊，通過Vue.refs擷取該節點對象，詳細使用說明請看我的上一篇文章：http://note.youdao.com/noteshare?id=02149c5e4c2aa8c80859d4e4cbed285c&sub=5A57DAABCC3941A48D0E15B2E23EB131）

option

startX: 0 開始的X軸位置

startY: 0 開始的Y軸位置

scrollY: true 滾動方向為 Y 軸

scrollX: ‘true’ 滾動方向為 X 軸

click: true 是否派發click事件

directionLockThreshold: 5

momentum: true 當快速滑動時是否開啟滑動慣性

bounce: true 是否啟用回彈動畫效果

selectedIndex: 0 wheel 為 true 時有效，表示被選中的 wheel 索引

rotate: 25 wheel 為 true 時有效，表示被選中的 wheel 每一層的旋轉角度

wheel: false 該屬性是給 picker 元件使用的，普通的清單滾動不需要配置

snap: false 該屬性是給 slider 元件使用的，普通的清單滾動不需要配置

snapLoop: false 是否可以無縫循環輪播

snapThreshold: 0.1 用手指滑動時頁面可切換的門檻值，大于這個門檻值可以滑動的下一頁

snapSpeed: 400, 輪播圖切換的動畫時間

swipeTime: 2500 swipe 持續時間

bounceTime: 700 彈力動畫持續的毫秒數

adjustTime: 400 wheel 為 true 有用，調整停留位置的時間

swipeBounceTime: 1200 swipe 回彈 時間

deceleration: 0.001 滾動動量減速越大越快，建議不大于0.01

momentumLimitTime: 300 符合慣性拖動的最大時間

momentumLimitDistance: 15 符合慣性拖動的最小拖動距離

resizePolling: 60 重新調整視窗大小時，重新計算better-scroll的時間間隔

preventDefault: true 是否阻止預設事件

preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止預設事件的例外配置

HWCompositing: true 是否啟用硬體加速

useTransition: true 是否使用CSS3的Transition屬性

useTransform: true 是否使用CSS3的Transform屬性

probeType: 1 會截流,隻有在滾動結束的時候派發一個 scroll 事件。2在手指 move 的時候也會實時派發 scroll 事件，不會截流。 3除了手指 move 的時候派發scroll事件，在 swipe（手指迅速滑動一小段距離）的情況下，清單會有一個長距離的滾動動畫，這個滾動的動畫過程中也會實時派發滾動事件

下為案例：

<template>
 <div class="goods">
    <div ref='menuWrapper'>
        ...此處省略...
    </div>
    <div ref='foodsWrapper'>
       ...此處省略...
    </div>
    <cartshop></cartshop>
</div>
</template>

import BScroll from 'better-scroll';
created(){
    this.$nextTick(()=>{
          this._initScroll();
      })
},
methods:{
//初始化better-scroll 的函數
    _initScroll() {
        //擷取better-scroll執行個體
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
            click:true
        });
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
            probeType:
        });
    }
}