小程式上拉載入下拉重新整理

在小程式api裡設定
onPullDownRefresh 下拉重新整理
onReachBottom 上拉觸低
想要使用這兩個方法還要在json檔案裡配置

“onReachBottomDistance”:true, 開啟上拉
“enablePullDownRefresh”: true,開啟下拉

onReachBottomDistance和enablePullDownRefresh 值有兩個 false 、true
例如要寫一個上拉載入

getLoginHistory : function (size){
    let that = this;
    wx.request({
        url: getApp().globalData.apiUrl ,
        header: { 'content-type': 'application/json' },
        data: {
            openId:getApp().globalData.openId,
            page:0,
            size:size
        },
        success: function (res) {
            that.setData({
                hidden: true,
            });
                wxperpagelength = res.data.listLength;
                that.setData({
                    wxList: res.data.list
                });
                console.log(wxperpagelength);
                if(wxperpagelength == "0"){
                    that.setData({
                        nullHide: false,
                        resultHidden:true
                    });
                    return false;
                }
                //判斷正在載入中是否顯示
                if (size >= wxperpagelength) {
                    hideData=true;
                    that.setData({

                        hidden: true,
                        resultHidden:false,

                    });
                    return false;
                }else{

                    hideData = false;
                    that.setData({
                        resultHidden: true,
                        hidden: true,
                    })
                }

        },
    });
},
 

這是一個獲取頁面列表的方法

page:0,
size:size
我只要在下拉onPullDownRefresh函式的時候更改一下頁面列表個數就能實現 。

 onReachBottom: function () {
    //判斷標示 獲得當前使用者點選的位置
    //移動
    if(hideData == false){
        size+=4;
        console.log(size);
        this.getLoginHistory(size);
        this.setData({
               resultHidden:true,
               hidden: false

        });

    }
    else {
        this.setData({
            resultHidden:false,
            hidden: true
        });
    }

},
 

這裡我設定一頁面使4跳資料，只要上拉的時候size 加4條資料就行，就能實現上拉載入。
同理 下拉重新整理就只要在下拉時修改size 就行

onPullDownRefresh: function(){
        let that = this;
        
                this.setData({
                    hidden: false,
                });

                this.getLoginHistory(4);
                if(size !== 4){
                    this.setData({
                        hidden: false,
                    });
                    this.getLoginHistory(4);

                }
        wx.stopPullDownRefresh();
    },