|
導(dǎo)讀微信小程序,簡(jiǎn)稱(chēng)小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱(chēng)小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門(mén)檻非常高的創(chuàng)新,經(jīng)過(guò)將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開(kāi)發(fā)環(huán)境和開(kāi)發(fā)者生態(tài)。 本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于微信小程序中列表上拉加載的實(shí)現(xiàn)代碼,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。 某個(gè)頁(yè)面,有多個(gè)列表,如100行,這時(shí)需要實(shí)現(xiàn)分頁(yè)功能,手機(jī)端的分頁(yè)一般都是滑到底部時(shí)上拉刷新。 使用scroll-view實(shí)現(xiàn),其bindscrolltolower方法:滾動(dòng)到底部/右邊觸發(fā)。當(dāng)觸發(fā)時(shí)發(fā)送請(qǐng)求獲取新的數(shù)據(jù),我寫(xiě)的時(shí)候獲取的數(shù)據(jù)很快,我還給它加了個(gè)定時(shí)器啊哈哈哈,因?yàn)槲蚁胱宻howLoading加載彈窗轉(zhuǎn)一轉(zhuǎn),讓用戶知道上拉刷新數(shù)據(jù)。因?yàn)闆](méi)加的時(shí)候showLoading一閃而過(guò),感覺(jué)體驗(yàn)效果不好。 最后scroll-view使用豎向滾動(dòng)時(shí),需要給<scroll-view/>一個(gè)固定高度(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>來(lái)一段邏輯的代碼 //上拉加載分頁(yè)
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++) {
//判斷計(jì)時(shí)付或一次性
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 = '計(jì)時(shí)付';
} else if (res.data.data[i].sign_type == 3) {
res.data.data[i].sign_type = '計(jì)時(shí)付';
} 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)沒(méi)有更多了..',
curPage: pageindex
})
}
} else {
that.setData({
load: '已經(jīng)沒(méi)有更多了'
})
}
}
})
wx.hideLoading();
},500)
},以上就是微信小程序中列表上拉加載的實(shí)現(xiàn)方法(附代碼)的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!