移动端滚动神器 better-scroll 系列篇二原生js+BS制作幻灯片

本文链接：https://blog.csdn.net/qq_35942348/article/details/103024175

话不多说，上代码

初始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");
            })