格式:let obj = new BScroll(object,{[option1,],.,.});
注意,如果在某一個組件內(nèi)創(chuàng)建了一個BScroll的實例羔挡,在組件生命周期結(jié)束前要注意調(diào)用destroy方法玖姑,否則在滑動過程中切換頁面會導(dǎo)致一直觸發(fā)scroll事件靠益,導(dǎo)致一些意想不到的問題宣决,切記!_耗恪弦叶!
Options 參數(shù)
- startX: 0 開始的X軸位置
- startY: 0 開始的Y軸位置
- scrollY: true 滾動方向為 Y 軸
- scrollX: true 滾動方向為 X 軸
- click: true 是否派發(fā)click事件,通常判斷瀏覽器派發(fā)的click還是betterscroll派發(fā)的click妇多,可以用_constructed伤哺,若是bs派發(fā)的則為true
- directionLockThreshold: 5
- momentum: true 當(dāng)快速滑動時是否開啟滑動慣性
- bounce: true 是否啟用回彈動畫效果
- selectedIndex: 0 wheel 為 true 時有效,表示被選中的 wheel 索引
- rotate: 25 wheel 為 true 時有效者祖,表示被選中的 wheel 每一層的旋轉(zhuǎn)角度
- wheel: false 該屬性是給 picker 組件使用的立莉,普通的列表滾動不需要配置
- snap: false 該屬性是給 slider 組件使用的,普通的列表滾動不需要配置
- snapLoop: false 是否可以無縫循環(huán)輪播
- snapThreshold: 0.1 用手指滑動時頁面可切換的閾值七问,大于這個閾值可以滑動的下一頁
- snapSpeed: 400, 輪播圖切換的動畫時間
- swipeTime: 2500 swipe 持續(xù)時間
- bounceTime: 700 彈力動畫持續(xù)的毫秒數(shù)
- adjustTime: 400 wheel 為 true 有用蜓耻,調(diào)整停留位置的時間
- swipeBounceTime: 1200 swipe 回彈 時間
- deceleration: 0.001 滾動動量減速越大越快,建議不大于0.01
- momentumLimitTime: 300 符合慣性拖動的最大時間
- momentumLimitDistance: 15 符合慣性拖動的最小拖動距離
- resizePolling: 60 重新調(diào)整窗口大小時烂瘫,重新計算better-scroll的時間間隔
- preventDefault: true 是否阻止默認事件
- preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認事件
- HWCompositing: true 是否啟用硬件加速
- useTransition: true 是否使用CSS3的Transition屬性
- useTransform: true 是否使用CSS3的Transform屬性
- probeType: 1 滾動的時候會派發(fā)scroll事件媒熊,會截流。2滾動的時候?qū)崟r派發(fā)scroll事件坟比,不會截流芦鳍。 3除了實時派發(fā)scroll事件,在swipe的情況下仍然能實時派發(fā)scroll事件
Events 事件
- beforeScrollStart - 滾動開始之前觸發(fā)
- scrollStart - 滾動開始時觸發(fā)
- scroll - 滾動時觸發(fā)
- scrollCancel - 取消滾動時觸發(fā)
- scrollEnd - 滾動結(jié)束時觸發(fā)
- touchend - 手指移開屏幕時觸發(fā)
- flick - 觸發(fā)了 fastclick 時的回調(diào)函數(shù)
- refresh - 當(dāng) better-scroll 刷新時觸發(fā)
- destroy - 銷毀 better-scroll 實例時觸發(fā)
Example:
let scroll = new BScroll(document.getElementById('wrapper'),{
probeType: 3
})
scroll.on('scroll', (pos) => {
console.log(pos.x + '~' + pos.y)
})
函數(shù)列表
- scrollTo(x, y, time, easing)
滾動到某個位置葛账,x,y 代表坐標(biāo)柠衅,time 表示動畫時間,easing 表示緩動函數(shù)
scroll.scrollTo(0, 500)
- scrollToElement(el, time, offsetX, offsetY, easing)
滾動到某個元素籍琳,el(必填)表示 dom 元素菲宴,time 表示動畫時間,offsetX 和 offsetY 表示坐標(biāo)偏移量趋急,easing 表示緩動函數(shù)
- refresh()
強制 scroll 重新計算喝峦,當(dāng) better-scroll 中的元素發(fā)生變化的時候調(diào)用此方法
- getCurrentPage()
snap 為 true 時,獲取滾動的當(dāng)前頁呜达,返回的對象結(jié)構(gòu)為 {x, y, pageX, pageY}谣蠢,其中 x,y 代表滾動橫向和縱向的位置;pageX查近,pageY 表示橫向和縱向的頁面索引眉踱。用法如:getCurrentPage().pageX
- goToPage(x, y, time, easing)
snap 為 true,滾動到對應(yīng)的頁面霜威,x 表示橫向頁面索引谈喳,y 表示縱向頁面索引, time 表示動畫戈泼,easing 表示緩動函數(shù)(可省略不寫)
- enable()啟用 better-scroll婿禽,默認開啟
- disable() 禁用 better-scroll
- destroy() 銷毀 better-scroll赏僧,解綁事件