微信小程序分頁(yè)加載的實(shí)例代碼
整理文檔,搜刮出一個(gè)微信小程序分頁(yè)加載的代碼,稍微整理精簡(jiǎn)一下做下分享。
分頁(yè)加載功能大家遇到的應(yīng)該會(huì)經(jīng)常遇到,應(yīng)用場(chǎng)景也很多,例如微博,QQ,微信朋友圈以及新聞?lì)悜?yīng)用,都會(huì)有分頁(yè)加載的功能,這不僅節(jié)省了我們用戶的流量,還提升了用戶體驗(yàn)。那么今天的這篇文章就是介紹微信小程序中如何實(shí)現(xiàn)分頁(yè)加載的功能。照例先上源碼及效果圖。
要實(shí)現(xiàn)這樣的功能,一般需要在請(qǐng)求數(shù)據(jù)時(shí)加入當(dāng)前請(qǐng)求頁(yè)數(shù),以及頁(yè)的大?。宽?yè)顯示的數(shù)量)也有一部分接口是通過請(qǐng)求的開始偏移量和結(jié)束偏移量請(qǐng)求數(shù)據(jù),例如你一頁(yè)顯示10條數(shù)據(jù),第一次(第一頁(yè))請(qǐng)求即開始start為0結(jié)束end是9,第二頁(yè)就是從10到19,以此類推。
既然要實(shí)現(xiàn)分頁(yè)加載功能,最重要就是下拉以及上拉的處理事件,在微信小程序中已經(jīng)幫我們封裝好了上拉以及下拉的觸發(fā)事件,如下
/** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { },
可能剛接觸微信小程序的愛好者,會(huì)遇到一個(gè)問題,為什么我重寫了上拉和下拉函數(shù),但是當(dāng)我上拉或者下拉的時(shí)候函數(shù)為什么不回調(diào)啊。莫急莫慌,那是因?yàn)槌酥貙戇@兩個(gè)函數(shù),我們還需要在json配置文件加入下面代碼
{ "enablePullDownRefresh": true }
有了上面的代碼,我們每次上拉或者下拉就會(huì)觸發(fā)相對(duì)應(yīng)的函數(shù)了。
在data中創(chuàng)建數(shù)據(jù)
data: { page: 1, pageSize: 30, hasMoreData: true, contentlist: [], },
page即為當(dāng)前請(qǐng)求數(shù)據(jù)時(shí)第幾頁(yè),pageSize是每頁(yè)的數(shù)據(jù)的大小,hasMoreData用于上拉的時(shí)候是不是要繼續(xù)請(qǐng)求數(shù)據(jù),即是不是還有更多數(shù)據(jù)。當(dāng)我們網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)成功后,如果請(qǐng)求數(shù)據(jù)的長(zhǎng)度小于pageSize: 30,那么就表示沒有更多數(shù)據(jù),將hasMoreData更改為false,如果請(qǐng)求的數(shù)據(jù)長(zhǎng)度是30,表示還有更多數(shù)據(jù)那么hasMoreData久更改為true,并將頁(yè)數(shù)page加1.當(dāng)下拉的時(shí)候講page先更改為1,然后去查詢數(shù)據(jù),當(dāng)查詢數(shù)據(jù)成功時(shí),如果page為1,就將獲取的數(shù)據(jù)直接賦值給contentlist,如果頁(yè)數(shù)大于1的話,就將請(qǐng)求的數(shù)據(jù)追加在contentlist后面。這樣就可以實(shí)現(xiàn)分頁(yè)加載的功能了。
經(jīng)過上面的分析,我們已經(jīng)對(duì)分頁(yè)加載的實(shí)現(xiàn)有了一個(gè)清晰的認(rèn)識(shí),那么接下來我就介紹代碼的實(shí)現(xiàn)。
getMusicInfo: function (message) { var that = this var data = { showapi_appid: '25158', showapi_sign: 'c0d685445898438f8c12ee8e93c2ee74', keyword: '我', page: that.data.page } network.requestLoading('https://route.showapi.com/213-1', data, message, function (res) { console.log(res) var contentlistTem = that.data.contentlist if (res.showapi_res_code == 0) { if (that.data.page == 1) { contentlistTem = [] } var contentlist = res.showapi_res_body.pagebean.contentlist if (contentlist.length < that.data.pageSize) { that.setData({ contentlist: contentlistTem.concat(contentlist), hasMoreData: false }) } else { that.setData({ contentlist: contentlistTem.concat(contentlist), hasMoreData: true, page: that.data.page + 1 }) } } else { wx.showToast({ title: res.showapi_res_error, }) } }, function (res) { wx.showToast({ title: '加載數(shù)據(jù)失敗', }) }) },
上面函數(shù)就是獲取音樂列表信息的請(qǐng)求處理邏輯,該函數(shù)有一個(gè)參數(shù)message,它是用來展示加載數(shù)據(jù)時(shí)的提示信息,例如當(dāng)下拉的時(shí)候,提示信息為正在刷新數(shù)據(jù),當(dāng)上拉的時(shí)候提示正在加載更多數(shù)據(jù)。
那么我們當(dāng)進(jìn)入頁(yè)面的時(shí)候開始加載一次數(shù)據(jù),即在onLoad函數(shù),如下
onLoad: function (options) { // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù) var that = this that.getMusicInfo('正在加載數(shù)據(jù)...') },
然后上拉和下拉函數(shù)的實(shí)現(xiàn)如下
/** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { this.data.page = 1 this.getMusicInfo('正在刷新數(shù)據(jù)') }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { if (this.data.hasMoreData) { this.getMusicInfo('加載更多數(shù)據(jù)') } else { wx.showToast({ title: '沒有更多數(shù)據(jù)', }) } },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崙?zhàn)之上拉(分頁(yè)加載)效果(2)
- 微信小程序云開發(fā)實(shí)現(xiàn)數(shù)據(jù)添加、查詢和分頁(yè)
- 微信小程序模板之分頁(yè)滑動(dòng)欄
- 微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果(ajax)
- 微信小程序?qū)崿F(xiàn)分頁(yè)加載效果
- 微信小程序?qū)崿F(xiàn)瀑布流分頁(yè)滾動(dòng)加載
- 微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁(yè)效果的方法詳解
- 微信小程序之搜索分頁(yè)功能的實(shí)現(xiàn)代碼
- 微信小程序?qū)崿F(xiàn)分頁(yè)查詢?cè)斀?/a>
- 微信小程序?qū)崿F(xiàn)本地分頁(yè)加載
相關(guān)文章
JS實(shí)現(xiàn)重新加載當(dāng)前頁(yè)面
本文主要介紹用JavaScript刷新上級(jí)頁(yè)面和當(dāng)前頁(yè)面。附上具體實(shí)例代碼。需要的朋友可以參考下2016-11-11javascript獲取鼠標(biāo)點(diǎn)擊元素對(duì)象(示例代碼)
本篇文章主要介紹了利用javascript獲取鼠標(biāo)點(diǎn)擊元素對(duì)象的示例代碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12JavaScript識(shí)別網(wǎng)頁(yè)關(guān)鍵字并進(jìn)行描紅的方法
這篇文章主要介紹了JavaScript識(shí)別網(wǎng)頁(yè)關(guān)鍵字并進(jìn)行描紅的方法,通過字符串的遍歷、匹配及動(dòng)態(tài)添加等操作實(shí)現(xiàn)識(shí)別與描紅的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11淺談如何優(yōu)雅處理JavaScript異步錯(cuò)誤
這篇文章主要介紹了淺談如何優(yōu)雅處理JavaScript異步錯(cuò)誤,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11基于BootstrapValidator的Form表單驗(yàn)證(24)
這篇文章主要為大家詳細(xì)介紹了基于BootstrapValidator的Form表驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12vscode錄音及語(yǔ)音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!
以目前的vscode版本來說,作者并沒有開放訪問本地媒體權(quán)限,所以插件市場(chǎng)里面的所有語(yǔ)音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限,這篇文章主要介紹了vscode錄音及語(yǔ)音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記!,需要的朋友可以參考下2023-05-05Openlayers實(shí)現(xiàn)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)地圖的基本操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表
本文主要介紹了Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表的實(shí)例解析。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03