1.使用组件scroll-view
参照小程序官方文档,采用scroll-view组件实现可滑动区域的加载。具体声明如下所示,主要使用bindscrolltolower事件实现下拉加载。
<scroll-view scroll-y="true" style="height: calc(100vh - 170px)" scroll-top="{
{scrollTop}}" bindscrolltolower="bindscrolltolower">
...
</scroll-view>
2.准备工作
声明分页需要的变量。
Page({
/**
* 页面的初始数据
*/
data: {
scrollTop: 0, //设置竖向滚动条位置
isFinihed:false, //下拉是否已经是最后一页
currentPage: 1, // 当前页页码
pageSize: 5, //每页查询条数
}
})
2.实现下拉加载
//网络请求,获取数