1. 程式人生 > >better-scroll外掛使用

better-scroll外掛使用

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)
...