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ù)前后,分別打開和關(guān)閉節(jié)流閥:
// 獲取商品列表數(shù)據(jù)的方法 async getGoodsList() { // ** 打開節(jié)流閥 this.isloading = true // 發(fā)起請求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) // ** 關(guān)閉節(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.dbjr.com.cn/article/257740.htm
總結(jié)
到此這篇關(guān)于uni-app實現(xiàn)數(shù)據(jù)上拉加載更多功能的文章就介紹到這了,更多相關(guān)uni-app數(shù)據(jù)上拉加載更多內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于d3.js/neovis.js/neod3.js實現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫的圖像化顯示功能
neovis.js?由vis.js支持的圖形可視化以及來自Neo4j的數(shù)據(jù)。這篇文章主要介紹了基于d3.js/neovis.js/neod3.js實現(xiàn)鏈接neo4j圖形數(shù)據(jù)庫的圖像化顯示功能,需要的朋友可以參考下2022-02-02用javascript實現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載
用javascript實現(xiàn)兼容IE7的類庫 IE7_0_9.zip提供下載...2007-08-08JavaScript交換變量的常用方法小結(jié)【4種方法】
這篇文章主要介紹了JavaScript交換變量的常用方法,結(jié)合實例形式總結(jié)分析了JavaScript交換變量的4種實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05一個頁面元素appendchild追加到另一個頁面元素的問題
一般都是自己創(chuàng)建元素然后append到頁面的但是如果是頁面本身有的元素append到另一個頁面元素呢,很多的新手朋友對此問題比較好奇,本人也是如此啊,好了不多說,切入主題,感興趣的朋友可以了解下哦2013-01-01