uni-app上拉加载更多⑩

文章目录

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

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

一、使用 uni-load-more 插件

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

使用：

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

二、修改参数传递

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

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

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

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

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

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

三、分类页数处理

1. 创建每一个分类的存储对象，含 page 及加载状态

   loadData:{
   	page:1,
   	loading:loading
   }

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

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