小程序之上拉加载

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情 目录

1.初步实现上拉加载更多

2.通过节流阀防止发起额外的请求

3.判断数据是否加载完毕

4.提示

1.初步实现上拉加载更多

1. 打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的 goods_list 页面配置上拉触底的距离： "onReachBottomDistance"

2.  "subPackages": [
      {
        "root": "subpkg",
        "pages": [
          {
            "path": "goods_detail/goods_detail",
            "style": {}
          },
          {
            "path": "goods_list/goods_list",
            "style": {
              "onReachBottomDistance": 150
            }
          },
          {
            "path": "search/search",
            "style": {}
          }
        ]
      }
    ]
   

3. 在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：

   // 触底的事件
   onReachBottom() {
     // 让页码值自增 +1
     this.queryObj.pagenum += 1
     // 重新获取列表数据
     this.getGoodsList()
   }
   

4. 改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理：

   // 获取商品列表数据的方法
   async getGoodsList() {
     // 发起请求
     const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
     if (res.meta.status !== 200) return uni.$showMsg()
   
     // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
     this.goodsList = [...this.goodsList, ...res.message.goods]
     this.total = res.message.total
   }
   

2.通过节流阀防止发起额外的请求

1. 在 data 中定义 isloading 节流阀如下：

   data() {
     return {
       // 是否正在请求数据
       isloading: false
     }
   }
   

2. 修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

   // 获取商品列表数据的方法
   async getGoodsList() {
     // ** 打开节流阀
     this.isloading = true
     // 发起请求
     const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
     // ** 关闭节流阀
     this.isloading = false
   
     // 省略其它代码...
   }
   

3. 在 onReachBottom 触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：

   // 触底的事件
   onReachBottom() {
     // 判断是否正在请求其它数据，如果是，则不发起额外的请求
     if (this.isloading) return
   
     this.queryObj.pagenum += 1
     this.getGoodsList()
   }
   

3.判断数据是否加载完毕

1. 如果下面的公式成立，则证明没有下一页数据了：

   当前的页码值 * 每页显示多少条数据 >= 总数条数
   pagenum * pagesize >= total
   

2. 修改 onReachBottom 事件处理函数如下：

   // 触底的事件
   onReachBottom() {
     // 判断是否还有下一页数据
     if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
   
     // 判断是否正在请求其它数据，如果是，则不发起额外的请求
     if (this.isloading) return
   
     this.queryObj.pagenum += 1
     this.getGoodsList()
   }
   

​

提示

在 onReachBottom 函数里 要让数据 自增 也就是

this.queryObj.pagenum += 1

这个功能实现，必须要先在 请求中 完成新旧数据的拼接，否则它会直接 覆盖上一页的内容，不会自增数据

// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接

this.goodsList = [...this.goodsList, ...res.message.goods]