格式: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'),{ probeType: 3}) scroll.on('scroll', (pos) => { console.log(pos.x + '~' + 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)