微信小程序 實現下拉刷新 上拉加載更多

效果：

注意這里的true是布爾型而不是字符；

有同學說設置完之后可以下拉，但是看不到圖標；

在app.json中這樣設置；

這樣下拉之后就可以看到了；

每個頁面生成的時候已經默認為我們設置了前面提到的onPullDownRefresh函數和onReachBottom函數

直接上代碼:

page為全局變量，用在在后面的加載請求，這里要和編寫數據接口的同事討論好請求；

// 下拉刷新 onPullDownRefresh: function () { // 顯示頂部刷新圖標 wx.showNavigationBarLoading(); var that = this; wx.request({ url: 'https://xxx/?page=0', method: "GET", header: { 'content-type': 'application/text' }, success: function (res) { that.setData({ moment: res.data.data }); console.log(that.data.moment); // 隱藏導航欄加載框 wx.hideNavigationBarLoading(); // 停止下拉動作 wx.stopPullDownRefresh(); } }) },

上拉加載更多：

完成。

/** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { var that = this; // 顯示加載圖標 wx.showLoading({ title: '玩命加載中', }) // 頁數+1 page = page + 1; wx.request({ url: 'https://xxx/?page=' + page, method: "GET", // 請求頭部 header: { 'content-type': 'application/text' }, success: function (res) { // 回調函數 var moment_list = that.data.moment; const oldData = that.data.moment; that.setData({ moment:oldData.concat(res.data.data) }) // 隱藏加載框 wx.hideLoading(); } }) },

完成

小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。