1. 程式人生 > 實用技巧 >better-scroll的常用配置

better-scroll的常用配置

使用:

import BScroll from 'better-scroll'

new BScroll('Swiper',{})

常用配置:

{
  click: true,  // 元素可觸發點選事件
  scrollX: false,  // 橫向可滑動,預設為false
  scrollY: true,  // 縱向可滑動,預設為true
  bounce: false,  // 當滾動超過邊緣的時候無回彈動畫
  preventDefaultException: {  // 設定區域性某元素原生事件不被禁止(預設preventDefault為true)
    className: 【正則表示式】
  },
  snap: {  // 滑動切換的一些配置
    speed: 800,  // 滑動切換的速度
    easing: {  // 滑動切換的動畫效果
      style: 'ease-in'
    },
    threshold: 0.5,  // 滑動切換到超過一半時切換到下一屏
    stepX: window.innerWidth,  // 橫向切換距離為視窗寬度
    stepY: window.innerHeight  // 縱向切換距離為視窗高度
  }
}

瞭解詳情

options引數

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

Event事件

beforeScrollStart - 滾動開始之前觸發
scrollStart - 滾動開始時觸發
scroll - 滾動時觸發
scrollCancel - 取消滾動時觸發
scrollEnd - 滾動結束時觸發
touchend - 手指移開螢幕時觸發
flick - 觸發了 fastclick 時的回撥函式
refresh - 當 better-scroll 重新整理時觸發
destroy - 銷燬 better-scroll 例項時觸發