移动端滚动神器 better-scroll 系列篇一初探BS

better-scroll是什么

1.BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。简而言之，移动端滚动神器。以下简称BS。

2.基于原生js开发，不依赖任何插件，所以既可以原生 JavaScript 引用，也可以与目前流行的前端 MVVM 框架结合使用。

3.目前最好用的移动端滚动插件，没有之一，1.8版本之后PC端也可以使用

阅读本文你可以学到什么

网上有大量的BS配合MVVM使用的案例，所以我这不多说，本系列文章讲的是BS如何配合原生JS使用，考虑到很多公司或企业并没有使用MVVM类框架。

开始使用

1.初始布局

<!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>
    </style>
    <style>
        body{
            margin: 0;
        }
        body,html{
            height: 100%;
        }
        ul,ol{
            list-style: none;
            padding: 0;
            margin: 0;
        }
       
        .con{
            width: 100vw;
            height: 100vh;
            /* 外框一定要设置高度 如果不设置 将没有效果 */
            overflow: hidden;
        } 
        /* 横向滑屏 */
        ul{
            /* width: 150vw; */
        }
        ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-indent: 20px;
            border-bottom: 1px solid #666666;
            color: #333333;
        }
        .demo{
            width: 100%;
            height: 100px;
            background: hotpink;
        }
        
    </style>
</head>
<body>
    <div class="con">
        <ul class="list">
            
        </ul>
        <!-- 没效果或被盖住 不建议这么使用 -->
        <div class="demo">

        </div>
    </div>
</body>
</html>

基础的列表布局完成，那么现在引入BS，此文用的是BS v1.12.1 (CDN)版本，大家使用的时候请务必注意版本号，版本低的可能有些功能不支持

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/bscroll.min.js"></script>

模拟初始数据

<script>
    function getData(){
        var list = document.querySelector(".list");
        var html = "";
        for(var i = 0; i < 30; i++){
            html += "<li>我是第"+(i+1)+"个li</li>"
        }
        list.innerHTML = html;
    }
    window.onload = () => {
        getData();
    }
</script>

现在我们刷新页面，能看到的是生成了一个ul列表，但是无法滑动，因为设置了overflow:hidden;

初始化容器

    //初始化con
    function con(){
        var con = document.querySelector(".con");
        var bscroll =  new BScroll(con,{
            //x轴偏移量
            // startX: 150,
            //y轴偏移量
            // startY: 150
            //横向是否可以滑屏
            scrollX:true,
            //纵向是否可以滑屏
            scrollY:true,
            //缓冲动画
            momentum:true
        });

        //事件
        bscroll.on("beforeScrollStart",()=>{
             //每次开始滚动的时候
             console.log("我要滚动了");
        })
        
    }
     window.onload = () => {
        getData();
        con();
    }

初始化之后，我们看到系统自带的滚动条已经消失不见了。这个区域还可以正常滑动，那么就是组件生效了

为什么不建议使用原生滚动条，主要有以下几点

原生的滚动条可能自带回弹
如果有叠层后面显示不了或显示不全
阻止事件穿透只能清除默认事件

FAQ

BScroll滚动的元素的是当前元素下的第一个子元素(下标为0), 以上案例为.con下的ul。
如果在ul下再次添加元素，比如以上案例中class为demo的div，它不仅无法滚动，甚至会被ul覆盖
外框(以上案例的con)一定要设置高度，否则无法滚动