vue使用 better-scroll的參數(shù)和方法詳解
格式:var obj = new BScroll(object,{[option1,],.,.});
注意:
1、要確保object元素的高度比其父元素高
2、使用時(shí),一定要確保object所在的dom渲染后,再用上面的語(yǔ)句,或者obj.refresh()
Options 參數(shù)
- startX: 0 開(kāi)始的X軸位置
- startY: 0 開(kāi)始的Y軸位置
- scrollY: true 滾動(dòng)方向?yàn)?Y 軸
- scrollX: true 滾動(dòng)方向?yàn)?X 軸
- click: true 是否派發(fā)click事件,通常判斷瀏覽器派發(fā)的click還是betterscroll派發(fā)的click,可以用event._constructed,若是bs派發(fā)的則為true
- directionLockThreshold: 5
- momentum: true 當(dāng)快速滑動(dòng)時(shí)是否開(kāi)啟滑動(dòng)慣性
- bounce: true 是否啟用回彈動(dòng)畫效果
- selectedIndex: 0 wheel 為 true 時(shí)有效,表示被選中的 wheel 索引
- rotate: 25 wheel 為 true 時(shí)有效,表示被選中的 wheel 每一層的旋轉(zhuǎn)角度
- wheel: false 該屬性是給 picker 組件使用的,普通的列表滾動(dòng)不需要配置
- snap: false 該屬性是給 slider 組件使用的,普通的列表滾動(dòng)不需要配置
- snapLoop: false 是否可以無(wú)縫循環(huán)輪播
- snapThreshold: 0.1 用手指滑動(dòng)時(shí)頁(yè)面可切換的閾值,大于這個(gè)閾值可以滑動(dòng)的下一頁(yè)
- snapSpeed: 400, 輪播圖切換的動(dòng)畫時(shí)間
- swipeTime: 2500 swipe 持續(xù)時(shí)間
- bounceTime: 700 彈力動(dòng)畫持續(xù)的毫秒數(shù)
- adjustTime: 400 wheel 為 true 有用,調(diào)整停留位置的時(shí)間
- swipeBounceTime: 1200 swipe 回彈 時(shí)間
- deceleration: 0.001 滾動(dòng)動(dòng)量減速越大越快,建議不大于0.01
- momentumLimitTime: 300 符合慣性拖動(dòng)的最大時(shí)間
- momentumLimitDistance: 15 符合慣性拖動(dòng)的最小拖動(dòng)距離
- resizePolling: 60 重新調(diào)整窗口大小時(shí),重新計(jì)算better-scroll的時(shí)間間隔
- preventDefault: true 是否阻止默認(rèn)事件
- preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認(rèn)事件
- HWCompositing: true 是否啟用硬件加速
- useTransition: true 是否使用CSS3的Transition屬性
- useTransform: true 是否使用CSS3的Transform屬性
- probeType: 1 滾動(dòng)的時(shí)候會(huì)派發(fā)scroll事件,會(huì)截流。2滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā)scroll事件,不會(huì)截流。 3除了實(shí)時(shí)派發(fā)scroll事件,在swipe的情況下仍然能實(shí)時(shí)派發(fā)scroll事件
Events 事件
代碼實(shí)例:
let scroll = new BScroll(document.getElementById('wrapper'),{
probeType: 3
})
scroll.on('scroll', (pos) => {
console.log(pos.x + '~' + pos.y)
})
- beforeScrollStart - 滾動(dòng)開(kāi)始之前觸發(fā)
- scrollStart - 滾動(dòng)開(kāi)始時(shí)觸發(fā)
- scroll - 滾動(dòng)時(shí)觸發(fā)
- scrollCancel - 取消滾動(dòng)時(shí)觸發(fā)
- scrollEnd - 滾動(dòng)結(jié)束時(shí)觸發(fā)
- touchend - 手指移開(kāi)屏幕時(shí)觸發(fā)
- flick - 觸發(fā)了 fastclick 時(shí)的回調(diào)函數(shù)
- refresh - 當(dāng) better-scroll 刷新時(shí)觸發(fā)
- destroy - 銷毀 better-scroll 實(shí)例時(shí)觸發(fā)
函數(shù)列表
scrollTo(x, y, time, easing):滾動(dòng)到某個(gè)位置,x,y 代表坐標(biāo),time 表示動(dòng)畫時(shí)間,easing 表示緩動(dòng)函數(shù)scroll.scrollTo(0, 500)
scrollToElement(el, time, offsetX, offsetY, easing):滾動(dòng)到某個(gè)元素,el(必填)表示 dom 元素,time 表示動(dòng)畫時(shí)間,offsetX 和 offsetY 表示坐標(biāo)偏移量,easing 表示緩動(dòng)函數(shù)
refresh():強(qiáng)制 scroll 重新計(jì)算,當(dāng) better-scroll 中的元素發(fā)生變化的時(shí)候調(diào)用此方法
getCurrentPage():snap 為 true 時(shí),獲取滾動(dòng)的當(dāng)前頁(yè),返回的對(duì)象結(jié)構(gòu)為 {x, y, pageX, pageY},其中 x,y 代表滾動(dòng)橫向和縱向的位置;pageX,pageY 表示橫向和縱向的頁(yè)面索引。用法如:getCurrentPage().pageX
goToPage(x, y, time, easing)
snap 為 true,滾動(dòng)到對(duì)應(yīng)的頁(yè)面,x 表示橫向頁(yè)面索引,y 表示縱向頁(yè)面索引, time 表示動(dòng)畫,easing 表示緩動(dòng)函數(shù)(可省略不寫)
enable()啟用 better-scroll,默認(rèn)開(kāi)啟
disable() 禁用 better-scroll
destroy() 銷毀 better-scroll,解綁事件
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解 vue better-scroll滾動(dòng)插件排坑
- vue滾動(dòng)軸插件better-scroll使用詳解
- vue利用better-scroll實(shí)現(xiàn)輪播圖與頁(yè)面滾動(dòng)詳解
- vue滾動(dòng)插件better-scroll使用詳解
- vue.js2.0 實(shí)現(xiàn)better-scroll的滾動(dòng)效果實(shí)例詳解
- vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
- vue better-scroll插件使用詳解
- vue2.0 better-scroll 實(shí)現(xiàn)移動(dòng)端滑動(dòng)的示例代碼
- vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
- Vue中利用better-scroll組件實(shí)現(xiàn)橫向滾動(dòng)功能
相關(guān)文章
vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
Element-ui?Layout布局(Row和Col組件)的實(shí)現(xiàn)
我們?cè)趯?shí)際開(kāi)發(fā)中遇到一些布局的時(shí)候會(huì)用到Layout布局,本文就詳細(xì)的介紹了Element-ui?Layout布局(Row和Col組件)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2021-12-12
vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例
本篇文章主要介紹了vuejs使用$emit和$on進(jìn)行組件之間的傳值的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-10-10
前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了前端實(shí)現(xiàn)Vue組件頁(yè)面跳轉(zhuǎn)的多種方式,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2024-02-02
在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的完整代碼
這篇文章主要介紹了在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
Vue3中實(shí)現(xiàn)歌詞滾動(dòng)顯示效果
本文分享如何在Vue 3中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的歌詞滾動(dòng)效果,我將從歌詞數(shù)據(jù)的處理開(kāi)始,一步步介紹布局的搭建和事件的實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-02-02
使用kbone解決Vue項(xiàng)目同時(shí)支持小程序問(wèn)題
這篇文章主要介紹了使用kbone解決Vue項(xiàng)目同時(shí)支持小程序問(wèn)題,本文通過(guò)一個(gè)todo的例子跟大家詳細(xì)介紹,需要的朋友可以參考下2019-11-11
詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07

