移动端滚动神器 better-scroll 系列篇三原生js+BS上滑加载，下拉刷新_var bs = betterscroll.createbscroll('body', { scro-CSDN博客

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

本文详细介绍了如何使用Better Scroll库在移动端实现滑动列表，包括基础布局设置、数据加载、容器初始化、上滑加载和下拉刷新等功能，并解决了常见问题。

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

第一步基础布局及引入JS

<!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;
            /* 外框一定要设置高度 如果不设置 将没有效果 */
            /* background: green; */
            overflow: hidden;
        } 
        /* 横向滑屏 */
        ul{
            /* width: 150vw; */
            position: relative;
        }
        ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-indent: 20px;
            border-bottom: 1px solid #666666;
            color: #333333;
        }
    </style>
</head>
<body>
    <div class="con">
        <ul class="list">
            
        </ul>
    </div>
</body>
<script type="text/javascript" src="https://unpkg.com/better-scroll@1.12.1/dist/bscroll.min.js"></script>

第二步模拟数据

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

列表有数据了，但是划不动，接下来让它动起来

第三步初始化容器

  //初始化con
    function con(){
        var con = document.querySelector(".con");
        var bscroll =  new BScroll(con,{
            scrollX:true,
            scrollY:true,
            momentum:true,
            //上滑加载的配置项
            pullUpLoad: {
                //滑动到底部还剩多少单位:px 进行一个操作
                threshold:50
            },
			//下拉刷新的配置项
            pullDownRefresh:{
            	//同上
                threshold:-50,
                //刷新的时间里停留的位置 单位:px
                stop:30
            }
        });
     }

记得: con()方法添加到加载函数里去，此时容器已经可以滚动了

第四步添加对应的方法(BS提供的)

先做一些样式处理,上滑及下拉的提示文字，这里只做简单处理

css 添加一些样式

 		.pullUp:after{
            content: "加载中，请稍候...";
        }
        .pullDown:before{
            content: "正在刷新，请稍候...";
            position: absolute;
            top: -30px;
        }

加一个数据更新的方法

//上滑加载 or 下拉刷新
    function getNewData(type){
        var html = "";
        for(var i = 0; i < 10; i++){
            html += "<li>新加载数据第"+(i+1)+"条</li>"
        }
        if(type === "up"){
            list.innerHTML += html;
        }else{
            list.innerHTML = html + list.innerHTML;
        }
    }

上滑加载

 //上滑加载事件
        bscroll.on("pullingUp",()=>{
            // console.log('111');
             //阀门,当所有数据加载完成不让它加载了
            var fal = false;
            setTimeout(()=>{
                getNewData("up");
                list.classList.add("pullUp");
                 if(!fal){
                     bscroll.closePullUp();
                 }else{
                     list.classList.add("pull");
                      //结束
                     bscroll.finishPullUp();
                 }
                //由于不是真实服务端接口 它不会刷新
                //需要手动刷新
                bscroll.refresh();
            },1000)
        })

下拉刷新

 bscroll.on("pullingDown",()=>{
            list.classList.add("pullDown");
            setTimeout(()=>{
                getNewData("down");
                //告诉他结束了下拉
                bscroll.finishPullDown();
                list.classList.remove("pullDown");
            },1000);
        })