直播网站源码，uni-app 数据上拉加载更多功能

直播网站源码，uni-app 数据上拉加载更多功能

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

1

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

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

1

// 触底的事件<br>onReachBottom() {<br>  // 让页码值自增 +1<br>  this.queryObj.pagenum += 1<br>  // 重新获取列表数据<br>  this.getGoodsList()<br>}<br> 改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理：<br>// 获取商品列表数据的方法<br>async getGoodsList() {<br>  // 发起请求<br>  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)<br>  if (res.meta.status !== 200) return uni.$showMsg()<br> <br>  // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接<br>  this.goodsList = [...this.goodsList, ...res.message.goods]<br>  this.total = res.message.total<br>}

 以上就是 直播网站源码，uni-app 数据上拉加载更多功能，更多内容欢迎关注之后的文章