小程序上拉加载下拉刷新

在小程序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();
    },

小程序上拉加载下拉刷新

小程序上拉加载下拉刷新

猜你喜欢