uni-app實現(xiàn)數(shù)據(jù)上拉加載更多功能實例

更新時間：2022年08月02日 14:28:13 作者：船長在船上

數(shù)據(jù)列表在很多時候,經常會用到,下面這篇文章主要給大家介紹了關于uni-app實現(xiàn)數(shù)據(jù)上拉加載更多功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

實現(xiàn)上拉加載更多

打開項目根目錄中的 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 節(jié)點平級，聲明 onReachBottom 事件處理函數(shù)，用來監(jiān)聽頁面的上拉觸底行為：

// 觸底的事件
onReachBottom() {
  // 讓頁碼值自增 +1
  this.queryObj.pagenum += 1
  // 重新獲取列表數(shù)據(jù)
  this.getGoodsList()
}

改造 methods 中的 getGoodsList 函數(shù)，當列表數(shù)據(jù)請求成功之后，進行新舊數(shù)據(jù)的拼接處理：

// 獲取商品列表數(shù)據(jù)的方法
async getGoodsList() {
  // 發(fā)起請求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  if (res.meta.status !== 200) return uni.$showMsg()
 
  // 為數(shù)據(jù)賦值：通過展開運算符的形式，進行新舊數(shù)據(jù)的拼接
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

優(yōu)化：

通過節(jié)流閥防止發(fā)起額外的請求

在 data 中定義 isloading 節(jié)流閥如下：

data() {
  return {
    // 是否正在請求數(shù)據(jù)
    isloading: false
  }
}

修改 getGoodsList 方法，在請求數(shù)據(jù)前后，分別打開和關閉節(jié)流閥：

// 獲取商品列表數(shù)據(jù)的方法
async getGoodsList() {
  // ** 打開節(jié)流閥
  this.isloading = true
  // 發(fā)起請求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  // ** 關閉節(jié)流閥
  this.isloading = false
 
  // 省略其它代碼...
}

在 onReachBottom 觸底事件處理函數(shù)中，根據(jù)節(jié)流閥的狀態(tài)，來決定是否發(fā)起請求：

// 觸底的事件
onReachBottom() {
  // 判斷是否正在請求其它數(shù)據(jù)，如果是，則不發(fā)起額外的請求
  if (this.isloading) return
 
  this.queryObj.pagenum += 1
  this.getGoodsList()
}

判斷數(shù)據(jù)是否加載完畢

如果下面的公式成立，則證明沒有下一頁數(shù)據(jù)了：

當前的頁碼值 * 每頁顯示多少條數(shù)據(jù) >= 總數(shù)條數(shù)

pagenum * pagesize >= total

修改 onReachBottom 事件處理函數(shù)如下：

// 觸底的事件
onReachBottom() {
  // 判斷是否還有下一頁數(shù)據(jù)
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('數(shù)據(jù)加載完畢！')
 
  // 判斷是否正在請求其它數(shù)據(jù)，如果是，則不發(fā)起額外的請求
  if (this.isloading) return
 
  this.queryObj.pagenum += 1
  this.getGoodsList()
}

下一篇：uni-app 數(shù)據(jù)下拉刷新功能

http://www.dhdzp.com/article/257740.htm

總結

到此這篇關于uni-app實現(xiàn)數(shù)據(jù)上拉加載更多功能的文章就介紹到這了,更多相關uni-app數(shù)據(jù)上拉加載更多內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js下獲取div中的數(shù)據(jù)的原理分析
最近用js寫了一個計算器的頁面?；旧鲜褂玫搅耍瑄l li的幾點用法。用來布局，并且創(chuàng)造出了很不錯的鼠標懸停效果。
2010-04-04
淺談JavaScript的全局變量與局部變量
下面小編就為大家?guī)硪黄獪\談JavaScript的全局變量與局部變量。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
ECMAScript6塊級作用域及新變量聲明（let）
這篇文章主要介紹了ECMAScript6塊級作用域及新變量聲明（let）的相關資料,需要的朋友可以參考下
2015-06-06
ECharts柱狀排名圖柱子上方顯示文字與圖標代碼實例
我們在繪制柱狀圖時如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關于ECharts柱狀排名圖柱子上方顯示文字與圖標的相關資料,需要的朋友可以參考下
2023-11-11
微信小程序自定義tabbar組件
這篇文章主要為大家詳細介紹了微信小程序自定義tabbar組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
js用typeof方法判斷undefined類型
js判斷undefined類型，可以使用typeof方法，typeof 返回的是字符串,其中就有一個是undefined
2014-07-07
原生JS實現(xiàn)《別踩白塊》游戲（兼容IE）
本文主要介紹了原生JS實現(xiàn)《別踩白塊》游戲（兼容IE）的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
詳解JavaScript的定時器
這篇文章主要為大家介紹了JavaScript的定時器，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
ajax請求亂碼的解決方法(中文亂碼)
這篇文章主要介紹了ajax請求亂碼的解決方法(中文亂碼),需要的朋友可以參考下
2014-04-04
JS實現(xiàn)長圖上下滾動效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)長圖上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03