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

「爱情、让人受尽委屈。」 2023-06-12 09:29 2阅读 0赞

### 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)版本，大家使用的时候请务必注意版本号，版本低的可能有些功能不支持**

#### 模拟初始数据 ####

现在我们刷新页面，能看到的是生成了一个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();
        }

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

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

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

> FAQ

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