uni-app 下拉刷新，上拉加载更多， mescroll组件超级方便

之前一直使用的uni-app自带的刷新方式，后来看到插件市场中人气最旺的mescroll，一直也没尝试用，今天特意看了下他的文档，刷新数据so easy

1.下载插件

点击 mescroll，使用 HBuilderX 导入插件

2.无需配置pages.json (检查是否配置了多余的属性):

{
       "path" : "pages/xxx/xxx", // 在具体的页面中, mescroll-body 无需像 mescroll-uni 那样需要配置 pages.json
       "style" : {
            "navigationBarTitleText" : "xxx",
            "backgroundColorTop":"#FFFFFF", // iOS下拉bounce回弹区域的颜色 (与down.bgColor同步)
            "backgroundColorBottom":"#FFFFFF", // iOS上拉bounce回弹区域的颜色 (与up.bgColor同步)
            "disableScroll": false, //删除此项: mescroll-body必须允许原生页面滚动, 默认false
            "enablePullDownRefresh" : false, //删除此项: 不开启系统自带的下拉刷新, 默认false
            "app-plus" : {
                "bounce" : "none" //可选: 是否禁止iOS回弹和Android触顶触底的弧形阴影, 默认允许 (可配在 'globalStyle')
            },
            "mp-alipay":{"allowsBounceVertical":"NO"} //可选: 取消支付宝和钉钉小程序的iOS回弹 (可配在 'globalStyle')
        }
    },
    "globalStyle" : {
        "backgroundColorTop":"#FFFFFF" // iOS APP真机bounce回弹区域默认灰色,建议统一重置为白色
    }
        

3. import MescrollMixin， 并设置mixins

4.设置 mescroll-body

5.加载数据

mescrollInit 和 downCallback回调函数不用写，mixins已默认

async upCallback(page) {
                try {
                    var params = {};
                    params.page = page.num; // 页码, 默认从1开始
                    params.perPage = page.size; // 页长, 默认每页10条

                    var res = await getOrderList(params);
                    let curDataList = res.orderlist;
                    var pageData = res.pageData;

                    //设置列表数据
                    if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
                    this.dataList = this.dataList.concat(curDataList); //追加新数据

                    this.mescroll.endByPage(curDataList.length, pageData.pageNum);
                    console.log("mescroll-body pageData.curPage: ", pageData.curPage, ' pageData.pageNum: ', pageData
                        .pageNum);
                } catch (e) {
                    //  请求失败,隐藏加载状态
                    console.log('上拉加载更多出错了');
                    this.mescroll.endErr()
                }
            }

页面完整代码如下：

更多其他用法请点击此处，查看官方文档