话不多说,上代码
初始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()**手动刷新。