better-scroll是什麼
1.BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件，適用於滾動列表、選擇器、輪播圖、索引列表、開屏引導等應用場景。簡而言之，移動端滾動神器。以下簡稱BS。
2.基於原生js開發，不依賴任何插件，所以既可以原生 JavaScript 引用，也可以與目前流行的前端 MVVM 框架結合使用。
3.目前最好用的移動端滾動插件，沒有之一，1.8版本之後PC端也可以使用
閱讀本文你可以學到什麼
網上有大量的BS配合MVVM使用的案例，所以我這不多說，本系列文章講的是BS如何配合原生JS使用，考慮到很多公司或企業並沒有使用MVVM類框架。
開始使用
1.初始佈局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
</style>
<style>
body{
margin: 0;
}
body,html{
height: 100%;
}
ul,ol{
list-style: none;
padding: 0;
margin: 0;
}
.con{
width: 100vw;
height: 100vh;
/* 外框一定要設置高度 如果不設置 將沒有效果 */
overflow: hidden;
}
/* 橫向滑屏 */
ul{
/* width: 150vw; */
}
ul>li{
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 20px;
border-bottom: 1px solid #666666;
color: #333333;
}
.demo{
width: 100%;
height: 100px;
background: hotpink;
}
</style>
</head>
<body>
<div class="con">
<ul class="list">
</ul>
<!-- 沒效果或被蓋住 不建議這麼使用 -->
<div class="demo">
</div>
</div>
</body>
</html>
基礎的列表佈局完成，那麼現在引入BS，此文用的是BS v1.12.1 (CDN)版本，大家使用的時候請務必注意版本號，版本低的可能有些功能不支持
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/bscroll.min.js"></script>
模擬初始數據
<script>
function getData(){
var list = document.querySelector(".list");
var html = "";
for(var i = 0; i < 30; i++){
html += "<li>我是第"+(i+1)+"個li</li>"
}
list.innerHTML = html;
}
window.onload = () => {
getData();
}
</script>
現在我們刷新頁面，能看到的是生成了一個ul列表，但是無法滑動，因爲設置了overflow:hidden;
初始化容器
//初始化con
function con(){
var con = document.querySelector(".con");
var bscroll = new BScroll(con,{
//x軸偏移量
// startX: 150,
//y軸偏移量
// startY: 150
//橫向是否可以滑屏
scrollX:true,
//縱向是否可以滑屏
scrollY:true,
//緩衝動畫
momentum:true
});
//事件
bscroll.on("beforeScrollStart",()=>{
//每次開始滾動的時候
console.log("我要滾動了");
})
}
window.onload = () => {
getData();
con();
}
初始化之後，我們看到系統自帶的滾動條已經消失不見了。這個區域還可以正常滑動，那麼就是組件生效了
爲什麼不建議使用原生滾動條，主要有以下幾點
- 原生的滾動條可能自帶回彈
- 如果有疊層 後面顯示不了或顯示不全
- 阻止事件穿透只能清除默認事件
FAQ
- BScroll滾動的元素的是當前元素下的第一個子元素(下標爲0), 以上案例爲.con下的ul。
- 如果在ul下再次添加元素，比如以上案例中class爲demo的div，它不僅無法滾動，甚至會被ul覆蓋
- 外框(以上案例的con)一定要設置高度，否則無法滾動