插件:better-scroll的參數(shù)和方法

格式: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赏僧,解綁事件
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市谈宛,隨后出現(xiàn)的幾起案子次哈,更是在濱河造成了極大的恐慌,老刑警劉巖吆录,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窑滞,死亡現(xiàn)場離奇詭異,居然都是意外死亡恢筝,警方通過查閱死者的電腦和手機哀卫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來撬槽,“玉大人此改,你說我怎么就攤上這事≈度幔” “怎么了共啃?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長暂题。 經(jīng)常有香客問我移剪,道長,這世上最難降的妖魔是什么薪者? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任纵苛,我火速辦了婚禮,結(jié)果婚禮上言津,老公的妹妹穿的比我還像新娘攻人。我一直安慰自己,他們只是感情好悬槽,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布怀吻。 她就那樣靜靜地躺著,像睡著了一般初婆。 火紅的嫁衣襯著肌膚如雪蓬坡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天烟逊,我揣著相機與錄音渣窜,去河邊找鬼铺根。 笑死宪躯,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的位迂。 我是一名探鬼主播访雪,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼详瑞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了臣缀?” 一聲冷哼從身側(cè)響起坝橡,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎精置,沒想到半個月后计寇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡脂倦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年番宁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赖阻。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蝶押,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出火欧,到底是詐尸還是另有隱情棋电,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布苇侵,位于F島的核電站赶盔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏衅檀。R本人自食惡果不足惜招刨,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望哀军。 院中可真熱鬧沉眶,春花似錦、人聲如沸杉适。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽猿推。三九已至片习,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蹬叭,已是汗流浹背藕咏。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留秽五,地道東北人孽查。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像坦喘,于是被迫代替她去往敵國和親盲再。 傳聞我的和親對象是個殘疾皇子西设,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 原網(wǎng)址 https://blog.csdn.net/qq_22557797/article/details/788...
    明明明明如月閱讀 4,431評論 0 3
  • 謝謝作者的文章 非常喜歡 請允許收藏! 博客園首頁博問閃存新隨筆訂閱管理 vue之better-scroll的封裝...
    peng凱閱讀 16,523評論 2 5
  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件梦碗,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,490評論 1 11
  • 本節(jié)介紹各種常見的瀏覽器事件禽绪。 鼠標(biāo)事件 鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件,主要有以下一些洪规。 click 事件丐一,dblc...
    許先生__閱讀 2,432評論 0 4
  • 最早從頭條聽說,習(xí)慣養(yǎng)成需要十四天淹冰。我用來‘養(yǎng)成早起習(xí)慣’库车。結(jié)果在第十五天,我睡到下午一點樱拴。 當(dāng)然對自己很失望柠衍。知...
    嫌疑人X的反思閱讀 319評論 0 5