一、注意事項(xiàng)：
使用better-scroll一定要保證
1、父元素（包裹元素，如果用的是scroll組件 則是<scroll></scroll>）的高度或?qū)挾葲]有子元素（被包裹的第一個(gè)子元素）大；
2、父元素（包裹元素，如果用的是scroll組件 則是<scroll></scroll>）需要使用overflow: hidden;；
3、當(dāng)子元素的內(nèi)容存在異步加載的情況或者滾動(dòng)相關(guān)組件在隱藏（display:none）狀態(tài)下發(fā)生了變化的情況時(shí)，記得使用refresh刷新（使用refresh方法時(shí)需要記得延時(shí)20ms執(zhí)行。因?yàn)闉g覽器刷新需要一定的時(shí)間）；
4、當(dāng)出現(xiàn)了scroll組件滾不到最后一個(gè)元素時(shí)（v-for遍歷后的最后的一個(gè)元素）應(yīng)該檢查：
a、 在vue中是否使用了<transition-group> 等標(biāo)簽，使用了的話記得在scroll組件上使用類似如 :refreshDelay="refreshDelay" 等屬性來控制列表數(shù)據(jù)變更后延遲刷新列表；（transition一般為零點(diǎn)幾秒 因此相應(yīng)的refreshDelay可為幾百數(shù)值）
b、 v-for遍歷后的元素是否使用了margin，有時(shí)候需要轉(zhuǎn)換成padding
5、滾動(dòng)只作用被包裹的第一個(gè)子元素。
以上如果沒有注意的話就可能出現(xiàn)滾不動(dòng)的情況。
二、簡(jiǎn)單例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.out {
height: 200px; // 父元素.out高度沒有子元素的第一個(gè)元素.in大
overflow: hidden; //這句別忘記了
border: 1px solid red;
}
.in {
height: 200%; //子元素的高度明顯大于父元素
border: 1px solid black;
}
</style>
</head>
<div class="out">
<div class="in">
https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br> https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
<br>
</div>
</div>
<body>
<script type="text/javascript" src='https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js'></script>
<script type="text/javascript">
console.log(BScroll);
let wrapper = document.querySelector('.out')
let scroll = new BScroll(wrapper)
</script>
</body>
</html>
三、 相關(guān)資料：
*本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝!
