第一步 基础布局及引入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); })
FAQ
- 由于不是真实服务端接口，BS有时候没有监听到dom变化，不会刷新，需要手动刷新 bscroll.refresh();
- 上滑及下拉结束之后一定要及时告诉BS，调用它的api，例如上滑加载: finishPullUp();
