亲宝软件园·资讯

展开

uni-app数据上拉加载更多

船长在船上 人气:0

实现上拉加载更多

打开项目根目录中的 pages.json 配置文件,为 subPackages 分包中的商品 goods_list 页面配置上拉触底的距离:

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

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

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

 改造 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
}

优化:

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

在 data 中定义 isloading 节流阀如下:

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

 修改 getGoodsList 方法,在请求数据前后,分别打开和关闭节流阀:

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

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

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

 判断数据是否加载完毕

如果下面的公式成立,则证明没有下一页数据了:

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

pagenum * pagesize >= total

修改 onReachBottom 事件处理函数如下:

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

下一篇:uni-app 数据下拉刷新功能

https:

总结

加载全部内容

相关教程
猜你喜欢
用户评论