頁面滾動插件 better-scroll 的用法

時間 2020-06-18

標籤頁面滾動插件 better scroll 用法简体版

原文原文鏈接

better-scroll 是一個頁面滾動插件，用它能夠很方便的實現下拉刷新，錨點滾動等功能。javascript

實現原理：父容器固定高度，並設置 overflow：hidden，子元素超出父元素高度後將被隱藏，超出部分可滾動且沒有滾動條。html

一. 當即使用

<body>
<div id="wrapper">
<ul>
   <li>...</li>
   <li>...</li>
   ...
</ul>
</div>
<script type="text/javascript" src="better-scroll.js"></script>
<script type="text/javascript">
new BScroll(document.getElementById(‘wrapper‘));
</script>
</body>

二. 結合 vue 使用

安裝 better-scroll npm install better-scrolljava
頁面中引入 better-scroll import BScroll from ‘better-scroll‘git
若是不支持 import，可以使用 var BScroll = require(‘better-scroll‘)github

頁面結構：npm

<div id="wrapper" ref="wrapper">
<ul class="container">
   <li>...</li>
   <li>...</li>
   ...
</ul>
</div>

注意：better-scroll 會將點擊事件去掉，若是滾動部分須要有點擊事件，須要在參數里加上 click：true。同時，在 PC 上或某些手機端，因爲未成功將 touchend 事件 move 掉，點擊事件會執行兩次。 better-scroll 派發的 event 事件和原生 js 的 event 有屬性上的區別，其中有一個屬性爲 event._constructed。better-scroll 派發的事件中 event._constructed 爲 true，原生點擊事件中沒有這個屬性。瀏覽器

selectList(index,event){
if(!event._constructed){//若是不存在這個屬性,則爲原生點擊事件，不執行下面的函數
    return
}
}

根據官方 API 的解釋可知，一些須要在頁面數據變化完成後才執行的函數須要寫在 $nextTick 中。app

this.$nextTick(() => {
this._initScroll()
})

三. better-scroll 參數

Options 參數dom
1. startX: 0 開始的 X 軸位置
2. startY: 0 開始的 Y 軸位置
3. scrollY: true 滾動方向爲 Y 軸
4. scrollX: true 滾動方向爲 X 軸
5. click: true 是否派發 click 事件，一般判斷瀏覽器派發的 click 仍是 betterscroll 派發的 click，能夠用 event._constructed，如果 bs 派發的則爲 true
6. directionLockThreshold: 5
7. momentum: true 當快速滑動時是否開啓滑動慣性
8. bounce: true 是否啓用回彈動畫效果
9. selectedIndex: 0 wheel 爲 true 時有效，表示被選中的 wheel 索引
10. rotate: 25 wheel 爲 true 時有效，表示被選中的 wheel 每一層的旋轉角度
11. wheel: false 該屬性是給 picker 組件使用的，普通的列表滾動不須要配置
12. snap: false 該屬性是給 slider 組件使用的，普通的列表滾動不須要配置
13. snapLoop: false 是否能夠無縫循環輪播
14. snapThreshold: 0.1 用手指滑動時頁面可切換的閾值，大於這個閾值能夠滑動的下一頁
15. snapSpeed: 400, 輪播圖切換的動畫時間
16. swipeTime: 2500 swipe 持續時間
17. bounceTime: 700 彈力動畫持續的毫秒數
18. adjustTime: 400 wheel 爲 true 有用，調整停留位置的時間
19. swipeBounceTime: 1200 swipe 回彈時間
20. deceleration: 0.001 滾動動量減速越大越快，建議不大於 0.01
21. momentumLimitTime: 300 符合慣性拖動的最大時間
22. momentumLimitDistance: 15 符合慣性拖動的最小拖動距離
23. resizePolling: 60 從新調整窗口大小時，從新計算 better-scroll 的時間間隔
24. preventDefault: true 是否阻止默認事件 preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認事件
25. HWCompositing: true 是否啓用硬件加速
26. useTransition: true 是否使用 CSS3 的 Transition 屬性
27. useTransform: true 是否使用 CSS3 的 Transform 屬性
28. probeType: 1 滾動的時候會派發 scroll 事件，會截流。2滾動的時候實時派發 scroll 事件，不會截流。 3除了實時派發 scroll 事件，在 swipe 的狀況下仍然能實時派發 scroll 事件
Events 事件
1. beforeScrollStart - 滾動開始以前觸發
2. scrollStart - 滾動開始時觸發
3. scroll - 滾動時觸發
4. scrollCancel - 取消滾動時觸發
5. scrollEnd - 滾動結束時觸發
6. touchend - 手指移開屏幕時觸發
7. flick - 觸發了 fastclick 時的回調函數
8. refresh - 當 better-scroll 刷新時觸發
9. destroy - 銷燬 better-scroll 實例時觸發
```
let scroll = new BScroll(document.getElementById('wrapper'),{
```
```
cilick: true,
probeType: 3
```
}) scroll.on('scroll', (pos) => { console.log(pos.x + '~' + pos.y) })
```
```
```
函數列表
1. scrollTo(x, y, time, easing) 滾動到某個位置，x,y 表明座標，time 表示動畫時間，easing 表示緩動函數
2. scroll.scrollTo(0, 500) scrollToElement(el, time, offsetX, offsetY, easing) 滾動到某個元素，el（必填）表示 dom 元素，time 表示動畫時間，offsetX 和 offsetY 表示座標偏移量，easing 表示緩動函數
3. refresh() 強制 scroll 從新計算，當 better-scroll 中的元素髮生變化的時候調用此方法
4. getCurrentPage() snap 爲 true 時，獲取滾動的當前頁，返回的對象結構爲 {x, y, pageX, pageY}，其中 x,y 表明滾動橫向和縱向的位置；pageX，pageY 表示橫向和縱向的頁面索引。用法如：getCurrentPage().pageX
5. goToPage(x, y, time, easing) snap 爲 true，滾動到對應的頁面，x 表示橫向頁面索引，y 表示縱向頁面索引， time 表示動畫，easing 表示緩動函數（可省略不寫）
6. enable() 啓用 better-scroll，默認開啓
7. disable() 禁用 better-scroll
8. destroy() 銷燬 better-scroll，解綁事件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。