1. 程式人生 > >vue使用 better-scroll的引數和方法

vue使用 better-scroll的引數和方法

格式: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 new BScroll(document.getElementById('wrapper'),{    probeType3 }) scroll.on('scroll'(pos=> {   console.log(pos.'~pos.y) })
  • 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,解綁事件