uni-app上拉加载更多⑩

转角羊儿2024-11-12 23:28

文章目录

- 十六、文章列表制作-上拉加载更多
- - - [一、使用 uni-load-more 插件](#一、使用 uni-load-more 插件)
    - 二、修改参数传递
    - 三、分类页数处理

十六、文章列表制作-上拉加载更多

一、使用 uni-load-more 插件

下载地址：https://ext.dcloud.net.cn/plugin?id=29

使用：

react 复制代码

<uni-load-more status="loading"></uni-load-more>

二、修改参数传递

前端添加 page 及 size 属性到云函数

云函数内进行返回值限制处理

javascript 复制代码

const list = await db
  .collection("article")
  .aggregate() // 使用聚合的形式进行数据的获取
  .match(matchObj) // 根据匹配条件进行数据返回
  .project({
    content: 0, // 本次查询不需要返回文章详情给前端
  })
  .skip(pageSize * (page - 1)) // 首页从0开始计算
  .limit(pageSize) // 每页最多返回多少条数据
  .end();

监听 scroll-view 的 scrolltolower 事件，触底时进行新的数据请求，当前的 page 值

前端调整数据处理将直接赋值变为追加数据

javascript 复制代码

// 填充数据时改变为追加数据
let oldList = this.articleData[currentIndex] || [];
oldList.push(...articleList);
this.$set(this.articleData, currentIndex, oldList);

三、分类页数处理

创建每一个分类的存储对象，含 page 及加载状态
javascript 复制代码
```
loadData:{
	page:1,
	loading:loading
}
```

处理数据全部加载完成状态

react 复制代码

// 判断当前后端没有返回数据处理
      if(!articleList.length) {
        this.loadData[currentIndex] = {
          loading:"noMore",
          page:this.loadData[currentIndex].page
        }
        this.$forceUpdate()
        return
      }