better-scroll外掛使用
阿新 • • 發佈:2019-01-04
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)
...