此页可在动态列表的基础上完善，也可以单独学习
【微信小程序-原生开发】实用教程10 - 动态列表的新增、修改、删除
效果预览
核心技术
列表的分页加载
- skip 跳跃到指定下标开始查询
- limit 限制返回的数据数量（云数据库最多20条/次，云函数最多100条/次）
- skip 配合 limit 使用，便能实现分页啦！
.skip(10 * (this.data.currentPage - 1)).limit(10) // 分页触底加载更多
默认加载列表的第一页数据后，当用户继续下滑列表，直到最后一行数据显示到屏幕中（即页面触底），开始加载下一页的数据
// 触底加载更多
onReachBottom: function () {
// 若已无更多数据，停止加载
if (this.data.noMore) {
return
}
// 若还有更多数据，当前页码自增1
this.setData({
currentPage: this.data.currentPage + 1
})
// 查询下一页的数据
this.getList()
}无更多数据的提醒和显示
当无更多数据时，访问接口后需弹窗提示消息，同时，在页面底部保留无更多数据的显示。
wx.showToast({
title: `没有更多数据啦！`,
})
因多个页面需要使用，此处封装成一个公共组件
自定义组件 - noMore
自定义组件的创建
在 pages 文件夹下新建文件夹 components，在components文件夹中新建文件夹 noMore，在文件夹 noMore上右键快捷菜单新建 Component，名称为 index
此时会像新增 Page 一样自动生成四个文件，因此组件无更多逻辑，我们只需修改 wxml 和 wxss 即可
pages\components\noMore\index.wxml
<view class="noMoreBox">
没有更多数据啦
</view>pages\components\noMore\index.wxss
.noMoreBox {
padding: 20rpx;
text-align: center;
font-size: 30rpx;
color: #bbbaba;
height: 60rpx;
}自定义组件的使用
当页面中需要使用自定义组件时，需先在 json 中配置
pages\components\message\index.json
在usingComponents 配置中添加
"no-more": "/pages/components/noMore/index",在页面末尾加上
<no-more wx:if="{{noMore}}" />完整代码实现
wx.showLoading({
title: '加载中',
})
db.where(condition)
.orderBy('date', 'desc') // 按 date 降序， asc 升序 desc 降序
.skip(10 * (this.data.currentPage - 1)).limit(10) // 分页
.get().then(
res => {
if (res.data.length === 0) {
this.setData({
currentPage: this.data.currentPage - 1,
noMore: true
})
wx.showToast({
title: `没有更多数据啦！`,
})
} else {
let data = res.data.map(item => {
item.date = DateToStr(item.date)
return item
})
that.setData({
// 累加已加载数据 concat
dataList: that.data.dataList.concat(data)
})
}
wx.hideLoading()
}
).catch(() => {
wx.hideLoading()
})