Vue中的better-scroll外掛

在需要的檔案中新增
import BScorll from 'better-scroll';
引用的示例程式碼:
let scroll = new BScroll(Dom物件, {//options
  startX: 0,
  startY: 0
})

Vue獲得Dom物件方法,
<div v-el:food-wrapper></div>//定義物件
this.$els.foodWrapper//獲取物件

(Vue 更新資料時是非同步的,所以在資料未載入完全之前,Bscroll無法獲取目標內容的高度,所以會導致無法滾動的現象)

為了解決上面的問題,運用Vue的nextTick();
(簡單說，因為DOM至少會在當前tick裡面的程式碼全部執行完畢再更新。所以不可能做到在修改資料後並且DOM更新後再執行，要保證在DOM更新以後再執行某一塊程式碼，就必須把這塊程式碼放到下一次事件迴圈裡面，比如setTimeout(fn, 0
 
)，這樣DOM更新後，就會立即執行這塊程式碼。)

// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

問題:
PC頁面時,點選不會被 better-scroll阻止事件,初始化,給 better-scroll派發事件,使移動端擁有點選事件,因此切換到PC端時,點選事件會被執行兩次,

方法:在點選時,傳 $event變數,Better-scroll外掛中的 event事件和原生 js的 event有屬性上得區別,Better-scroll外掛派發的事件時event_constructed為true,原生點選事件是沒有這個屬性的,

selectMenu(index,event
 
){
    if(!event._constructed){//如果不存在這個屬性,則不執行下面的函式
        return;
    }
}

引數說明：

• startX: 0 開始的X軸位置
• startY: 0 開始的Y軸位置
• scrollY: true 滾動方向
• click: true 是否啟用click事件
• directionLockThreshold: 5
• momentum: true 是否開啟動量動畫，關閉可以提升效率
• bounce: true 是否啟用彈力動畫效果，關掉可以加速
• selectedIndex: 0
• rotate: 25
• wheel: false 是否監聽滑鼠滾輪事件
• snap: false 自動分割容器，用於製作走馬燈效果等
• snapLoop: false
• snapThreshold: 0.1
• swipeTime: 2500
• bounceTime: 700 彈力動畫持續的毫秒數
• adjustTime: 400
• swipeBounceTime: 1200
• 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屬性，否則使用requestAnimationFram代替
• useTransform: true 是否使用CSS3的Transform屬性
• probeType: 1 滾動的時候會派發scroll事件，會截流。2滾動的時候實時派發 - scroll事件，不會截流。 3除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件

Events 事件

let scroll = new BScroll(document.getElementById('wrapper'),{
   probeType: 3
})

scroll.on('scroll', (pos) => {
  console.log(pos.x + '~' + posx.y)
  ...
})

Events 列表

• beforeScrollStart 滾動開始之前觸發
• scrollStart 滾動開始時觸發
• scroll 滾動時觸發
• scrollCancel 取消滾動時觸發
• scrollEnd 滾動結束時觸發
• flick
• refresh
• destroy 銷燬better-scroll例項時觸發

派發滾動

let scroll = new BScroll(document.getElementById('wrapper'))
scroll.scrollTo(0, 500)
...