由于在公眾號(hào)內(nèi)，分頁加載應(yīng)用場景還是蠻多的，所以此處總結(jié)一下用法，以方便別的同事直接拿來使用

html部分,此處需要注意：分頁加載更多組件外層最好包一個(gè)盒子，并動(dòng)態(tài)計(jì)算出它的高度，mescroll-uni的top值與此是相關(guān)聯(lián)

<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">補(bǔ)貨單號(hào)：</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">售貨機(jī)：</text>
                                <text class="item-val">{{item.vemCount}}臺(tái)</text>
                            </view>
                            <view class="item-label-box">
                                <text class="item-label">已補(bǔ)貨：</text>
                                <text class="item-val">{{item.finishVemCount}}臺(tái)</text>
                            </view>
                        </view>
                        <view class="item-info">
                            <view class="item-label-box fill-name-box">
                                <text class="item-label">補(bǔ)貨員：</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="進(jìn)行中" 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中定義一個(gè)分頁加載實(shí)例的變量

data() {
          return {
                mescroll: null
            }
        },
methods: {
            // mescroll組件初始化的回調(diào),可獲取到mescroll對(duì)象
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            // 初始化
            init() {
                // 從詳情返回來刷新列表
                if (this.mescroll) {
                    this.mescroll.resetUpScroll();
                }
                
            },
            // 獲取列表數(shù)據(jù)
            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();
                        // 處理源數(shù)據(jù)
                        if (res && res.code === this.$snbc.$constant.RESULT_CODE) {
                            if (res.result && res.result.content) {
                                let listData =  res.result.content;
                                //聯(lián)網(wǎng)成功的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
                                mescroll.endBySize(listData.length, res.result.pageInfo.totalElements); // res.result.pageInfo.totalElements 總共多少條數(shù)據(jù)
                                //如果是第一頁需手動(dòng)制空列表
                                if (mescroll.num === 1) {
                                    this.dataList = [];
                                }
                                //追加新數(shù)據(jù)
                                this.dataList = this.dataList.concat(listData);
                            }
                        } else {
                            uni.showToast({
                                title: res.message,
                                icon: 'none'
                            });
                        }
                    }).catch(() => {
                        uni.hideLoading();
                    });
            },
            /*下拉刷新的回調(diào) */
            downCallback(mescroll) {
                // 下拉刷新
                mescroll.resetUpScroll();
            },
            /*上拉加載的回調(diào): mescroll攜帶page的參數(shù), 其中num:當(dāng)前頁 從1開始, size:每頁數(shù)據(jù)條數(shù) */
            upCallback(mescroll) {
                //獲取計(jì)劃列表數(shù)據(jù)
                this.getList(mescroll, mescroll.num, mescroll.size);
            },
            // 切換補(bǔ)貨單狀態(tài)
            onChangeTab(e) {
                this.fillStatusIndex = e;
                this.$refs.scrollParent.fisrtLoad();
                this.mescroll.resetUpScroll();
            }
}