微信小程序下拉刷新和加载更多的代码封装

不少页面除了接口地址和模板不同外,几乎是类似的,好比用户的收益页面、提现记录页面,都是默认显示第一页数据,下拉刷新,加载更多,彻底能够封装。api

使用的时候这样就行了app

const app = getApp();

var refreshLoad = app.refreshLoad(app).setApiName("getWithdrawList");

Page(refreshLoad);

库的封装代码this

var x = {};

var app = null;

var apiName = null;

x.init = function(appInstance){
    app = appInstance;
    return this;
};

x.setApiName = function(name){
    apiName = name;
    return this;
};

x.data = {};

x.onLoad = function(option)
{
    this.setData(option);
    this.setPage(1);
    wx.startPullDownRefresh();
};

x.setPage = function(page)
{
    this.setData({page: page});
};

x.loadData = function()
{
    function success(response)
    {
        var dataTemp = response.data.data;
        var list = [];
        if(that.data.page > 1){
            list = that.data.list.concat(dataTemp.list);
        }
        else{
            list = dataTemp.list;
        }
        var data = {
            list: list,
            next: dataTemp.next,
            count: dataTemp.count
        };
        that.setData(data);
        wx.stopPullDownRefresh();
    }
    
    var that = this;
    var data = {
        token: app.dry.getToken(),
        device: app.config.device,
        page: this.data.page
    };
    app.r().setData(data).setSuccess(app.msg.ifFailStop).setSuccess(success).setLoadingText("正在加载数据").run(apiName);
};

x.onPullDownRefresh = function()
{
    this.setPage(1);
    this.loadData();
};

x.onReachBottom = function()
{
    if(this.data.next){
        this.setPage(this.data.page + 1);
        this.loadData();
    }
};

module.exports = x;
相关文章
相关标签/搜索