您好,登錄后才能下訂單哦!
這篇文章主要講解了“uni-app如何實現(xiàn)數(shù)據(jù)上拉加載更多功能”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“uni-app如何實現(xiàn)數(shù)據(jù)上拉加載更多功能”吧!
打開項目根目錄中的 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ù),當(dāng)列表數(shù)據(jù)請求成功之后,進(jìn)行新舊數(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ù)賦值:通過展開運算符的形式,進(jìn)行新舊數(shù)據(jù)的拼接 this.goodsList = [...this.goodsList, ...res.message.goods] this.total = res.message.total }
在 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ù)了:
當(dāng)前的頁碼值 * 每頁顯示多少條數(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如何實現(xiàn)數(shù)據(jù)上拉加載更多功能”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對uni-app如何實現(xiàn)數(shù)據(jù)上拉加載更多功能這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。