第一步 基础布局及引入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/[email protected]/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();