直播網站原始碼，uni-app 資料上拉載入更多功能

直播網站原始碼，uni-app 資料上拉載入更多功能

開啟專案根目錄中的 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
}

 以上就是 直播網站原始碼，uni-app 資料上拉載入更多功能，更多內容歡迎關注之後的文章