移动端滚动神器 better-scroll 系列篇三原生js+BS上滑加载，下拉刷新

迈不过友情╰ 2023-06-13 04:46 5阅读 0赞

### 第一步 基础布局及引入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>

### 第二步 模拟数据 ###

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

### 第三步 初始化容器 ###

//初始化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);
            })

> FAQ

1.  由于不是真实服务端接口，BS有时候没有监听到dom变化，不会刷新，需要手动刷新 *bscroll.refresh();*
2.  上滑及下拉结束之后一定要及时告诉BS，调用它的api，例如上滑加载: *finishPullUp();*