vue使用 better-scroll的參數(shù)和方法詳解

更新時間：2018年01月25日 09:02:52 作者：初雪日

這篇文章主要介紹了vue使用 better-scroll的參數(shù)和方法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

注意：

1、要確保object元素的高度比其父元素高
2、使用時，一定要確保object所在的dom渲染后，再用上面的語句，或者obj.refresh()

Options 參數(shù)

startX: 0 開始的X軸位置
startY: 0 開始的Y軸位置
scrollY: true 滾動方向為 Y 軸
scrollX: true 滾動方向為 X 軸
click: true 是否派發(fā)click事件，通常判斷瀏覽器派發(fā)的click還是betterscroll派發(fā)的click，可以用event._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 事件

代碼實例：

let scroll = new BScroll(document.getElementById('wrapper'),{
  probeType: 3
})
 
scroll.on('scroll', (pos) => {
 console.log(pos.x + '~' + pos.y)
})

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ā)

函數(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，解綁事件

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: