话不多说，上代码
初始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/better-scroll@1.12.1/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()**手动刷新。
