轉載:better-scroll的相關api

格式:var obj = new BScroll(object,{[option1,],.,.});

注意:一、要確保object元素的高度比其父元素高瀏覽器

          二、使用時,必定要確保object所在的dom渲染後再用上面的語句,或者fresh()app

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已修改,改成下面所示:
snap: {    該屬性是給 slider 組件使用的,普通的列表滾動不須要配置
       loop: false, 是否能夠無縫循環輪播
       threshold: 0.1, 用手指滑動時頁面可切換的閾值,大於這個閾值能夠滑動的下一頁
       speed: 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 事件

beforeScrollStart - 滾動開始以前觸發
scrollStart - 滾動開始時觸發
scroll - 滾動時觸發
scrollCancel - 取消滾動時觸發
scrollEnd - 滾動結束時觸發
touchend - 手指移開屏幕時觸發
flick - 觸發了 fastclick 時的回調函數
refresh - 當 better-scroll 刷新時觸發
destroy - 銷燬 better-scroll 實例時觸發

Example:dom

let scroll new BScroll(document.getElementById('wrapper'),{
   probeType3
})
 
scroll.on('scroll'(pos=> {
  console.log(pos.'~pos.y)
})

函數列表

scrollTo(x, y, time, easing)

            滾動到某個位置,x,y 表明座標,time 表示動畫時間,easing 表示緩動函數
            scroll.scrollTo(0, 500)curl

scrollToElement(el, time, offsetX, offsetY, easing)

           滾動到某個元素,el(必填)表示 dom 元素,time 表示動畫時間,offsetX 和 offsetY 表示座標偏移量,easing 表示緩動函數ide

refresh()

           強制 scroll 從新計算,當 better-scroll 中的元素髮生變化的時候調用此方法函數

getCurrentPage()

           snap 爲 true 時,獲取滾動的當前頁,返回的對象結構爲 {x, y, pageX, pageY},其中 x,y 表明滾動橫向和縱向的位置;pageX,pageY 表示橫向和縱向的頁面索引。用法如:getCurrentPage().pageXoop

goToPage(x, y, time, easing)

           snap 爲 true,滾動到對應的頁面,x 表示橫向頁面索引,y 表示縱向頁面索引, time 表示動畫,easing 表示緩動函數(可省略不寫) 動畫

enable()  
           啓用 better-scroll,默認開啓
disable()  
           禁用 better-scroll
destroy()
          銷燬 better-scroll,解綁事件
相關文章
相關標籤/搜索