vue使用 better-scroll的引數和方法
阿新 • • 發佈:2019-01-10
格式:var obj = new BScroll(object,{[option1,],.,.});
注意:
1、要確保object元素的高度比其父元素高
2、使用時,一定要確保object所在的dom渲染後,再用上面的語句,或者obj.refresh()
Options 引數
- startX:
0
開始的X軸位置- startY:
0
開始的Y軸位置- scrollY:
true
滾動方向為 Y 軸- scrollX: true 滾動方向為 X 軸
- click:
true
是否派發click事件,通常判斷瀏覽器派發的click還是betterscroll派發的click,可以用event._constructed,若是bs派發的則為true- 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
滾動的時候實時派發scroll事件,不會截流。3
除了實時派發scroll事件,在swipe的情況下仍然能實時派發scroll事件
Events 事件
程式碼例項:
let scroll = probeType: 3 scroll
- beforeScrollStart - 滾動開始之前觸發
- scrollStart - 滾動開始時觸發
- scroll - 滾動時觸發
- scrollCancel - 取消滾動時觸發
- scrollEnd - 滾動結束時觸發
- touchend - 手指移開螢幕時觸發
- flick - 觸發了 fastclick 時的回撥函式
- refresh - 當 better-scroll 重新整理時觸發
- destroy - 銷燬 better-scroll 例項時觸發
函式列表
- scrollTo(x, y, time, easing)
滾動到某個位置,x,y 代表座標,time 表示動畫時間,easing 表示緩動函式
scroll.scrollTo(0, 500)
- scrollToElement(el, time, offsetX, offsetY, easing)
滾動到某個元素,el(必填)表示 dom 元素,time 表示動畫時間,offsetX 和 offsetY 表示座標偏移量,easing 表示緩動函式
- refresh()
強制 scroll 重新計算,當 better-scroll 中的元素髮生變化的時候呼叫此方法
- getCurrentPage()
snap 為 true 時,獲取滾動的當前頁,返回的物件結構為 {x, y, pageX, pageY},其中 x,y 代表滾動橫向和縱向的位置;pageX,pageY 表示橫向和縱向的頁面索引。用法如:getCurrentPage().pageX
- goToPage(x, y, time, easing)
snap 為 true,滾動到對應的頁面,x 表示橫向頁面索引,y 表示縱向頁面索引, time 表示動畫,easing 表示緩動函式(可省略不寫)
- enable()啟用 better-scroll,預設開啟
- disable() 禁用 better-scroll
- destroy() 銷燬 better-scroll,解綁事件