話不多說，上代碼
初始html結構
<!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>
body{
margin: 0;
}
body,html{
height: 100%;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
.con{
width: 100vw;
/* height: 100vh; */
overflow: hidden;
position: relative;
}
.list{
width: 400vw;
overflow: hidden;
position: relative;
}
.list li{
width: 100vw;
height: 200px;
float: left;
text-align: center;
box-sizing: border-box;
font:24px/200px "微軟雅黑";
background: chocolate;
color: white;
/* border:1px solid green; */
}
.nav{
position: absolute;
bottom: 10px;
left: 0;
width: 100vw;
text-align: center;
}
.nav a{
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
background: white;
}
.nav a.active{
background: orange;
}
</style>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/bscroll.min.js"></script>
</head>
<body>
<div class="con">
<ul class="list">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
<nav class="nav">
<a class="active"></a>
<a></a>
<a></a>
<a></a>
</nav>
</div>
<script>
</body>
</html>
初始化容器
<script>
window.onload = () =>{
var con = document.querySelector(".con");
var list = document.querySelector(".list");
var navs = document.querySelectorAll(".nav a");
var bscroll = new BScroll(con,{
//橫向滾動 關閉Y軸滾動
scrollX:true,
scrollY:false,
//一般爲一次滾動一張，所以這裏關閉緩衝動畫
momentum:false,
//此項爲高級配置項 可以設置無縫滾動
snap: {
//無縫滾動配置項 多了第一張和最後一張 設置ul的寬度
// loop:true,
//滑動的距離爲屏幕大小的百分比佔比
threshold:0.2
}
});
</script>
這個時候我們可以看到，已經能正常滾動了，一次只滾動一張。接下來把nav加上去，滾動到第幾張給個點標識一下。
scrollEnd事件爲當前滾動操作執行完之後觸發
bscroll.on("scrollEnd",()=>{
//刷新dom
bscroll.refresh();
//當前視口頁的下標
console.log(bscroll.getCurrentPage().pageX);
//對象 頁數 滑動距離
navs.forEach((nav)=>{
if (nav) nav.classList.remove("active");
})
navs[bscroll.getCurrentPage().pageX].classList.add("active");
})
FAQ
用模擬數據沒有請求服務端的時候，當dom發生變化的時候，BS有時候沒有感知，需要調用**refresh()**手動刷新。