HTML结构
<div id="position-wrapper">
<div>
<p class="refresh">下拉刷新</p >
<div class="position-list">
</div>
<p class="more">查看更多</p >
</div>
</div>
实例化上拉下拉插件,通过use来注册插件
import BScroll from "@better-scroll/core";
import PullDown from "@better-scroll/pull-down";
import PullUp from '@better-scroll/pull-up';
BScroll.use(PullDown);
BScroll.use(PullUp);
实例化BetterScroll,并传入相关的参数
let pageNo = 1,pageSize = 10,dataList = [],isMore = true;
var scroll= new BScroll("#position-wrapper",{
scrollY:true,
click:true,
pullUpLoad:true,
pullDownRefresh:{
threshold:50,
stop:0
}
});
监听下拉刷新 上拉加载更多
scroll.on("pullingDown",pullingDownHandler);
scroll.on("scroll",scrollHandler);
scroll.on("pullingUp",pullingUpHandler);
async function pullingDownHandler(){
dataList=[];
pageNo=1;
isMore=true;
$(".more").text("查看更多");
await getlist();
scroll.finishPullDown();
scroll.refresh();
}
async function pullingUpHandler(){
if(!isMore){
$(".more").text("没有更多数据了");
scroll.finishPullUp();
return;
}
pageNo++;
await this.getlist();
scroll.finishPullUp();
scroll.refresh();
}
function scrollHandler(){
if(this.y>50) $('.refresh').text("松手开始加载");
else $('.refresh').text("下拉刷新");
}
function getlist(){
let result=....;
dataList=dataList.concat(result);
if(result.length<pageSize) isMore=false;
}
注意点:
- wrapper里必须只有一个子元素
- 子元素的高度要比wrapper要高
- 使用的时候,要确定DOM元素是否已经生成,必须要等到DOM渲染完成后,再new BScroll()
- 滚动区域的DOM元素结构有变化后,需要执行刷新 refresh()
- 上拉或者下拉,结束后,需要执行finishPullUp()或者finishPullDown(),否则将不会执行下次操作
- better-scroll,默认会阻止浏览器的原生click事件,如果滚动内容区要添加点击事件,需要在实例化属性里设置click:true