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

最新推荐文章于 2024-01-05 11:20:57 发布

欧阳呀

最新推荐文章于 2024-01-05 11:20:57 发布

阅读量825

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js js插件库 better-scroll 文章标签：原生js 原生js使用better-scroll better-scroll better-scroll案例

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

js 同时被 3 个专栏收录

53 篇文章

订阅专栏

better-scroll

4 篇文章

订阅专栏

js插件库

3 篇文章

订阅专栏

本文介绍BetterScroll，一款专为移动端设计的高性能滚动插件，支持多种滚动场景，如滚动列表、选择器、轮播图等。基于原生JavaScript开发，可独立使用或与MVVM框架结合。文章提供了初始布局示例、数据模拟及组件初始化步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/better-scroll@1.12.1/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();
    }