2021-04-20 分類: 微信小程序
1.app.json中:
"window": {
"enablePullDownRefresh": true //是否開啟當前頁面下拉刷新
}
2.wxml中:
{{item.title}} {{item.inputtime}} {{item.content}}
3.js中:
data: { hidden: true, //隱藏表單控件 page: 1, //當前請求數據是第幾頁 pageSize: 10, //每頁數據條數 hasMoreData: true, //上拉時是否繼續請求數據,即是否還有更多數據 contentlist: [], //獲取的數據列表,以追加的形式添加進去 }, // 獲取分頁列表 getInfo: function (message) { var that = this; wx.showNavigationBarLoading() //在當前頁面顯示導航條加載動畫 wx.showLoading({ //顯示 loading 提示框 title: message, }) wx.request({ url: 'http://localhost:88/wechat/test.php', //本地設置不校驗合法域名 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() //在當前頁面隱藏導航條加載動畫 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) { }, }) }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onLoad: function (options) { // 頁面初始化 options為頁面跳轉所帶來的參數 var that = this that.getInfo('正在加載數據...') }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { this.data.page = 1 this.getInfo('正在刷新數據') }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { if (this.data.hasMoreData) { this.getInfo('加載更多數據') } else { wx.showToast({ title: '沒有更多數據', }) } }
分享題目:微信小程序中的加載更多(即列表分頁)
鏈接分享:http://vcdvsql.cn/news/109097.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有微信小程序等
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容