公众号内分页加载，上滑加载更多，下拉刷新

由于在公众号内，分页加载应用场景还是蛮多的，所以此处总结一下用法，以方便别的同事直接拿来使用

html部分,此处需要注意：分页加载更多组件外层最好包一个盒子，并动态计算出它的高度，mescroll-uni的top值与此是相关联

<view scroll-y="true" style="height: calc(100% - 286upx);">
            <mescroll-uni @down="downCallback"  @up="upCallback"  @init="mescrollInit" ref="scrollParent" style="top: 286upx;">
                <view class="item bottom-margin" @click="goPage(item.fillNo)" v-for="item in dataList" :key="item.id"
                >
                    <view class="item-left">
                        <view class="item-num">
                            <text class="item-label">补货单号：</text>
                            <text class="item-val item-num-val">{{item.fillNo}}</text>
                        </view>
                        <view class="item-vems-box">
                            <view class="item-label-box item-vems">
                                <text class="item-label">售货机：</text>
                                <text class="item-val">{{item.vemCount}}台</text>
                            </view>
                            <view class="item-label-box">
                                <text class="item-label">已补货：</text>
                                <text class="item-val">{{item.finishVemCount}}台</text>
                            </view>
                        </view>
                        <view class="item-info">
                            <view class="item-label-box fill-name-box">
                                <text class="item-label">补货员：</text>
                                <text class="item-val fill-name">{{item.fillName}}</text>
                            </view>
                        </view>
                    </view>
                    <view class="item-right">
                        <uni-tag  type="warning" size="small" :circle="false" text="进行中" v-if="item.fillStatus===1" class="status-tag"></uni-tag>
                        <uni-tag  type="success" size="small" :circle="false" text="已完成" v-else-if="item.fillStatus===2" class="status-tag"></uni-tag>
                        <uni-tag  type="error" size="small" :circle="false" text="未完成" v-else class="status-tag"></uni-tag>
                        <view class="feedback" v-if="item.feedbackFlag === '1'">[反馈]</view>
                    </view>
                </view>
            </mescroll-uni>
        </view>

css部分

/deep/ .mescroll-upwarp {
        display: none;
    }

    /deep/ .mescroll-uni.mescroll-uni-fixed {
        top: 286upx !important; // 此处top值跟mescroll-uni的top值保持一致
    }
    /deep/ .mescroll-totop {
        display: none;
    }

js部分

data中定义一个分页加载实例的变量

data() {
          return {
                mescroll: null
            }
        },
methods: {
            // mescroll组件初始化的回调,可获取到mescroll对象
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            // 初始化
            init() {
                // 从详情返回来刷新列表
                if (this.mescroll) {
                    this.mescroll.resetUpScroll();
                }
                
            },
            // 获取列表数据
            getList(mescroll) { // 此处需要传入mescroll
                uni.showLoading({
                    title: this.lang.global.loading
                });
                let params = {
                    
                    page: mescroll.num,
                    size: mescroll.size,
                    fillStatus: this.analysisData[this.fillStatusIndex]
                };
                this.$snbc.$service.$operationmanager.getFillTasks(params)
                    .then(res => {
                        uni.hideLoading();
                        // 处理源数据
                        if (res && res.code === this.$snbc.$constant.RESULT_CODE) {
                            if (res.result && res.result.content) {
                                let listData =  res.result.content;
                                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                                mescroll.endBySize(listData.length, res.result.pageInfo.totalElements); // res.result.pageInfo.totalElements 总共多少条数据
                                //如果是第一页需手动制空列表
                                if (mescroll.num === 1) {
                                    this.dataList = [];
                                }
                                //追加新数据
                                this.dataList = this.dataList.concat(listData);
                            }
                        } else {
                            uni.showToast({
                                title: res.message,
                                icon: 'none'
                            });
                        }
                    }).catch(() => {
                        uni.hideLoading();
                    });
            },
            /*下拉刷新的回调 */
            downCallback(mescroll) {
                // 下拉刷新
                mescroll.resetUpScroll();
            },
            /*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数 */
            upCallback(mescroll) {
                //获取计划列表数据
                this.getList(mescroll, mescroll.num, mescroll.size);
            },
            // 切换补货单状态
            onChangeTab(e) {
                this.fillStatusIndex = e;
                this.$refs.scrollParent.fisrtLoad();
                this.mescroll.resetUpScroll();
            }
}