當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序下拉刷新/上拉加载更多

發布時間：2023/12/15 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序下拉刷新/上拉加载更多小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

查看文檔，在用page()函數注冊頁面的時候有這樣的兩個對象參數用戶判斷用戶在最頂部下拉和到達最底部，

在小程序里，用戶頂部下拉是默認禁止的，我們需要把他設置為啟用，在app.json中的設置對所有頁面有效，在單獨頁面設置則對當前頁面有效；

看一下json文件

"enablePullDownRefresh": true,

注意這里的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

});

// 設置數組元素

that.setData({

moment: that.data.moment

});

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;

for (var i = 0; i < res.data.data.length; i++) {

moment_list.push(res.data.data[i]);

}

// 設置數據

that.setData({

moment: that.data.moment

})

// 隱藏加載框

wx.hideLoading();

}

})

總結

以上是生活随笔為你收集整理的微信小程序下拉刷新/上拉加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。