查看文檔犁功,在用page()函數(shù)注冊(cè)頁面的時(shí)候有這樣的兩個(gè)對(duì)象參數(shù)用戶判斷用戶在最頂部下拉和到達(dá)最底部,
在小程序里婚夫,用戶頂部下拉是默認(rèn)禁止的浸卦,我們需要把他設(shè)置為啟用,在app.json中的設(shè)置對(duì)所有頁面有效案糙,在單獨(dú)頁面設(shè)置則對(duì)當(dāng)前頁面有效限嫌;
看一下json文件
"enablePullDownRefresh": true,
注意這里的true是布爾型而不是字符靴庆;
有同學(xué)說設(shè)置完之后可以下拉,但是看不到圖標(biāo)萤皂;
在app.json中這樣設(shè)置;
這樣下拉之后就可以看到了匣椰;
每個(gè)頁面生成的時(shí)候已經(jīng)默認(rèn)為我們?cè)O(shè)置了前面提到的onPullDownRefresh函數(shù)和onReachBottom函數(shù)
直接上代碼:
page為全局變量裆熙,用在在后面的加載請(qǐng)求,這里要跟后端大哥討論好請(qǐng)求禽笑;
// 下拉刷新
? onPullDownRefresh: function () {
? ? // 顯示頂部刷新圖標(biāo)
? ? 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
? ? ? ? });
? ? ? ? // 設(shè)置數(shù)組元素
? ? ? ? that.setData({
? ? ? ? ? moment: that.data.moment
? ? ? ? });
? ? ? ? console.log(that.data.moment);
? ? ? ? // 隱藏導(dǎo)航欄加載框
? ? ? ? wx.hideNavigationBarLoading();
? ? ? ? // 停止下拉動(dòng)作
? ? ? ? wx.stopPullDownRefresh();
? ? ? }
? ? })
? },
上拉加載更多:
/**
? * 頁面上拉觸底事件的處理函數(shù)
? */
? onReachBottom: function () {
? ? var that = this;
? ? // 顯示加載圖標(biāo)
? ? wx.showLoading({
? ? ? title: '玩命加載中',
? ? })
? ? // 頁數(shù)+1
? ? page = page + 1;
? ? wx.request({
? ? ? url: 'https://xxx/?page=' + page,
? ? ? method: "GET",
? ? ? // 請(qǐng)求頭部
? ? ? header: {
? ? ? ? 'content-type': 'application/text'
? ? ? },
? ? ? success: function (res) {
? ? ? ? // 回調(diào)函數(shù)
? ? ? ? var moment_list = that.data.moment;
? ? ? ? for (var i = 0; i < res.data.data.length; i++) {
? ? ? ? ? moment_list.push(res.data.data[i]);
? ? ? ? }
? ? ? ? // 設(shè)置數(shù)據(jù)
? ? ? ? that.setData({
? ? ? ? ? moment: that.data.moment
? ? ? ? })
? ? ? ? // 隱藏加載框
? ? ? ? wx.hideLoading();
? ? ? }
? ? })
? },
結(jié)束H肼肌!<丫怠A鸥濉!s吧臁J赐!0√汀4缆纭!3倜邸I部住!D染ΑK柘肌!F杞洹7娇狻!U险P胶础!E湓@掖!G绻1患谩!