2021-04-20 分類(lèi): 微信小程序
1.app.json中:
"window": {
"enablePullDownRefresh": true //是否開(kāi)啟當(dāng)前頁(yè)面下拉刷新
}
2.wxml中:
<view class="info" wx:for="{{contentlist}}" wx:key="key"> <input hidden="{{hidden}}" value="{{item.id}}"/> <text>{{item.title}}</text> <text class="time">{{item.inputtime}}</text> <view> <text>{{item.content}}</text> </view> </view>
3.js中:
data: { hidden: true, //隱藏表單控件 page: 1, //當(dāng)前請(qǐng)求數(shù)據(jù)是第幾頁(yè) pageSize: 10, //每頁(yè)數(shù)據(jù)條數(shù) hasMoreData: true, //上拉時(shí)是否繼續(xù)請(qǐng)求數(shù)據(jù),即是否還有更多數(shù)據(jù) contentlist: [], //獲取的數(shù)據(jù)列表,以追加的形式添加進(jìn)去 }, // 獲取分頁(yè)列表 getInfo: function (message) { var that = this; wx.showNavigationBarLoading() //在當(dāng)前頁(yè)面顯示導(dǎo)航條加載動(dòng)畫(huà) wx.showLoading({ //顯示 loading 提示框 title: message, }) wx.request({ url: 'http://localhost:88/wechat/test.php', //本地設(shè)置不校驗(yàn)合法域名 data: { page: that.data.page, count: that.data.pageSize }, method: 'post', header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { var contentlistTem = that.data.contentlist; if (res.data.length > 0) { wx.hideNavigationBarLoading() //在當(dāng)前頁(yè)面隱藏導(dǎo)航條加載動(dòng)畫(huà) wx.hideLoading() //隱藏 loading 提示框 if (that.data.page == 1) { contentlistTem = [] } var contentlist = res.data; 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 }) } } }, fail: function (res) { wx.hideNavigationBarLoading() wx.hideLoading() fail() }, complete: function (res) { }, }) }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onLoad: function (options) { // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) var that = this that.getInfo('正在加載數(shù)據(jù)...') }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作 */ onPullDownRefresh: function () { this.data.page = 1 this.getInfo('正在刷新數(shù)據(jù)') }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { if (this.data.hasMoreData) { this.getInfo('加載更多數(shù)據(jù)') } else { wx.showToast({ title: '沒(méi)有更多數(shù)據(jù)', }) } }
本文名稱(chēng):微信小程序中的加載更多(即列表分頁(yè))
分享URL:http://m.newbst.com/news47/109097.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有微信小程序等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容