【vue】在移動端使用better-scroll 實現滾動效果

標籤：hub   napt   off   tle   als   回呼函數   target   func   save   

 安裝依賴：(c)npm install better-scroll --save引入：　　import BScroll from ‘better-scroll‘格式：　　var obj = new BScroll(object,{[option1,],.,.});注意：1、要確保object元素的高度比其父元素高2、使用時，一定要確保object所在的dom渲染後再用上面的語句，或者fresh() 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 事件

• beforeScrollStart - 滾動開始之前觸發
• scrollStart - 滾動開始時觸發
• scroll - 滾動時觸發
• scrollCancel - 取消滾動時觸發
• scrollEnd - 滾動結束時觸發
• touchend - 手指移開螢幕時觸發
• flick - 觸發了 fastclick 時的回呼函數
• refresh - 當 better-scroll 重新整理時觸發
• destroy - 銷毀 better-scroll 執行個體時觸發

Example:

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

 

函數列表

• scrollTo(x, y, time, easing)

滾動到某個位置，x,y 代表座標，time 表示動畫時間，easing 表示easing 函式
scroll.scrollTo(0, 500)

 

• scrollToElement(el, time, offsetX, offsetY, easing)

滾動到某個元素，el（必填）表示 dom 元素，time 表示動畫時間，offsetX 和 offsetY 表示座標位移量，easing 表示easing 函式

 

• refresh()

強制 scroll 重新計算，當 better-scroll 中的元素髮生變化的時候調用此方法

 

• getCurrentPage()

snap 為 true 時，擷取滾動的當前頁，返回的對象結構為 {x, y, pageX, pageY}，其中 x,y 代表滾動橫向和縱向的位置；pageX，pageY 表示橫向和縱向的頁面索引。用法如：getCurrentPage().pageX

 

• goToPage(x, y, time, easing)

snap 為 true，滾動到對應的頁面，x 表示橫向頁面索引，y 表示縱向頁面索引， time 表示動畫，easing 表示easing 函式（可省略不寫）

 

• enable()啟用 better-scroll，預設開啟

 

• disable()  禁用 better-scroll

 

• destroy() 銷毀 better-scroll，解除綁定事件

參考連結：

•  78257916
• https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html#npm

    

【vue】在移動端使用better-scroll 實現滾動效果