mescroll组件使用，1个页面多个刷新

//装包
npm install --save mescroll.js

//main.js引入
//MescrollVue; //上拉加载,下拉刷新
import MescrollVue from 'mescroll.js/mescroll.vue'
Vue.component('mescroll-vue', MescrollVue);

//页面中使用
<van-tabs type="card" :animated="true" @click="change_tab">
    <van-tab title="已提交">
        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <ul v-show="tab1_show">
                <li v-for="(item,index) in 5" :key="index">
                    <div>
                        <p>单号：已提交</p>
                        <p>时间：2019/02/22 13:00</p>
                    </div>
                    <div>
                        <span>金额：5.00</span>
                        <span>手续费：0.00</span>
                    </div>
                </li>
            </ul>
            <img class="img" src="@img/icons/7219.png" v-show="!tab1_show"/>
        </mescroll-vue>
    </van-tab>
    <van-tab title="完成">
        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <ul v-show="tab2_show">
                <li v-for="(item,index) in 5" :key="index">
                    <div>
                        <p>单号：完成</p>
                        <p>时间：2019/02/22 13:00</p>
                    </div>
                    <div>
                        <span>金额：5.00</span>
                        <span>手续费：0.00</span>
                    </div>
                </li>
            </ul>
            <img class="img" src="@img/icons/7219.png" v-show="!tab2_show"/>
        </mescroll-vue>
    </van-tab>
</van-tabs>

data() {
    return {
        mescroll: null,
        mescrollDown: { auto: false,},
        mescrollUp: { callback: this.upCallback, },
        tab1_list:[],
        tab1_show:true,//tab1数据
        tab2_list:[],
        tab2_show:true,//tab2数据
        tab_active:0,//当前请求那条数据
    }
},
methods: {
    //tab切换
    change_tab(index,name){
        if(index != this.tab_active){
            this.tab_active = index;
        }
    },
    
    
    mescrollInit(mescroll) {
        this.mescroll = mescroll;
    },
    upCallback(page, mescroll) {
        if(this.tab_active == 0){
            //已提交
            this.$http.post('/api/index/news_list', {
                type:this.tab_active,
                page: page.num,
            }).then(res => {
                if (res.status == 1) {
                    let arr = res.data.list;
                    if (page.num === 1) this.tab1_list = [];
                    this.tab1_list = this.tab1_list.concat(arr);
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.length)
                    })
                    if (this.tab1_list.length == 0) {
                        this.tab1_show = false;
                    }else{
                        this.tab1_show = true;
                    }
                }
            }).catch((e) => {
                mescroll.endErr();
                this.tab1_show = false;
            });
        }else{
            //已完成
            this.$http.post('/api/index/news_list', {
                type:this.tab_active,
                page: page.num,
            }).then(res => {
                if (res.status == 1) {
                    let arr = res.data.list;
                    if (page.num === 1) this.tab2_list = [];
                    this.tab2_list = this.tab2_list.concat(arr);
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.length)
                    })
                    if (this.tab2_list.length == 0) {
                        this.tab2_show = false;
                    }else{
                        this.tab2_show = true;
                    }
                }
            }).catch((e) => {
                mescroll.endErr();
                this.tab2_show = false;
            });
        }
    },
},