線上服務(wù)咨詢
Article/文章
記錄成長點(diǎn)滴 分享您我感悟
微信小程序中列表上拉加載的實(shí)現(xiàn)方法(附代碼)
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序中列表上拉加載的實(shí)現(xiàn)代碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
某個頁面,有多個列表,如100行,這時需要實(shí)現(xiàn)分頁功能,手機(jī)端的分頁一般都是滑到底部時上拉刷新。
使用scroll-view實(shí)現(xiàn),其bindscrolltolower方法:滾動到底部/右邊觸發(fā)。當(dāng)觸發(fā)時發(fā)送請求獲取新的數(shù)據(jù),我寫的時候獲取的數(shù)據(jù)很快,我還給它加了個定時器啊哈哈哈,因為我想讓showLoading加載彈窗轉(zhuǎn)一轉(zhuǎn),讓用戶知道上拉刷新數(shù)據(jù)。因為沒加的時候showLoading一閃而過,感覺體驗效果不好。
最后scroll-view使用豎向滾動時,需要給<scroll-view/>一個固定高度(height:93%),再給page設(shè)置高度(height:100%),否則bindscrolltolower觸發(fā)不了
<scroll-view wx:if="{{isShowList}}" class='scrollHeight' scroll-y="true" bindscrolltolower="getMore" lower-threshold='3'></scroll-view>
來一段邏輯的代碼
//上拉加載分頁 getMore(e){ var that = this; var user = wx.getStorageSync('bizUser'); wx.showLoading({ title: '正在加載中', }); setTimeout(function(){ var pageindex = that.data.curPage; var student = that.data.student; if (pageindex>=1){ ++pageindex; } wx.request({ url: app.url + '', data: { schoolId: user.schoolId, pageSize: 10, curPage:pageindex }, method: 'GET', success:function(res){ if (res.data.data) { var studentLength = (res.data.data instanceof Array) ? res.data.data.length : 0; for (var i = 0; i < studentLength; i++) { //判斷計時付或一次性 if (res.data.data[i].sign_type == 2) { res.data.data[i].sign_type = '一次性'; } else if (res.data.data[i].sign_type == 1) { res.data.data[i].sign_type = '計時付'; } else if (res.data.data[i].sign_type == 3) { res.data.data[i].sign_type = '計時付'; } else if (res.data.data[i].sign_type == 4) { res.data.data[i].sign_type = '一次性'; } else if (res.data.data[i].sign_type = 5) { res.data.data[i].sign_type = '一次性' } //數(shù)字變中文 if (res.data.data[i].learn_stage == 1) { res.data.data[i].learn_stage = '一'; } else if (res.data.data[i].learn_stage == 2) { res.data.data[i].learn_stage = '二'; } else if (res.data.data[i].learn_stage == 3) { res.data.data[i].learn_stage = '三' } } if (studentLength ==10) { for (var j = 0; j < studentLength;j++){ student.push(res.data.data[j]); } that.setData({ student: student, load: '上拉加載更多..', curPage: pageindex }) } else if (studentLength<10){ for (var j = 0; j < studentLength; j++) { student.push(res.data.data[j]); } that.setData({ student: student, load: '已經(jīng)沒有更多了..', curPage: pageindex }) } } else { that.setData({ load: '已經(jīng)沒有更多了' }) } } }) w設(shè)計軟件x.hideLoading(); },500) },
以上就是微信小程序中列表上拉加載的實(shí)現(xiàn)方法(附代碼)的詳細(xì)內(nèi)容,更多請關(guān)注沈陽網(wǎng)站建設(shè)其它相關(guān)文章!
微信小程序