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

àì夳堔傛蜴生んèń 2023-06-12 09:41 3阅读 0赞

话不多说，上代码

> 初始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>

> 初始化容器

这个时候我们可以看到，已经能正常滚动了，一次只滚动一张。接下来把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()\*\*手动刷新。