【微信小程序-原生开发】实用教程14 - 列表的分页加载，触底加载更多（含无更多数据的提醒和显示，自定义组件）

此页可在动态列表的基础上完善，也可以单独学习

【微信小程序-原生开发】实用教程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()
        })