使用scroll-view实现
代码
前端
html
<scroll-view class="scrollarea" scroll-y type="list" bindscrolltolower='loadMore'>
<view wx:for="{{list}}" class="item" wx:key="index">
{{index+1}}
</view>
</scroll-view>
样式
css
page {
width: 100%;
height: 100%;
}
.scrollarea {
width: 100%;
height: 100%;
}
.item {
font-size: 40rpx;
text-align: center;
height: 100rpx;
line-height: 100rpx;
width: 100%;
border-bottom: 2rpx solid #ccc;
}
js逻辑
js
// index.js
Page({
data: {
//每页展示的数据
size: 15,
//页码
page: 1,
//总数量
total: 0,
list: [],
//是否正在加载数据
isLoadMore: false
},
onLoad() {
//模拟请求数据,第一次数据尽量占满屏幕
this.setData({
total: 100,
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
})
},
loadMore() {
if (((this.data.page - 1) * this.data.size) >= this.data.total) {
//没有更多数据
return;
}
if (this.data.isLoadMore) {
return;
}
this.setData({
isLoadMore: true
}, () => {
wx.showNavigationBarLoading()
})
let newData = this.data.list.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15])
if (newData.length > this.data.total) {
newData = newData.splice(0, this.data.total)
}
this.setData({
list: newData
})
setTimeout(() => {
this.setData({
isLoadMore: false
}, () => {
wx.hideNavigationBarLoading()
})
}, 1000);
}
})
效果

原理
监听scroll-view的触底事件(bindscrolltolower),然后触发加载,根据总数量判断是否存在更多,存在则加载,scroll-view也支持自定义距离底部多少触发触底事件,属性是 lower-threshold
,默认50
链接:https://pan.quark.cn/s/9abb450b2a94
提取码:B9he