上拉載入，下拉重新整理，頁面快取： 1.頁面有3個不同的 tab 選項卡，切記每一個選項卡里面的列表資料不能用同一個 資料來源，每一個列表的資料來源必須單獨定義 2.點選每一個報修單號的資訊進入其詳情頁面，返回的時候依舊停留在離開時的tab標籤頁，這個需求我們採用 vue 提供的 keep-alive 來對頁面資料進行快取處理，在進入路由的時候，我們採用 beforeRouteEnter 的方法重新初始化資料 3.在HTML頁面上必須採用 mescroll-vue 標籤包住整個資料dom

程式碼如下：

//data 裡面初始化資料來源

 data(){
        return{
            heardList:['全部','待稽核','已稽核'],
            count:0,
            mescroll: null, // mescroll例項物件
            mescrollDown:{  }, //下拉重新整理的配置. (如果下拉重新整理和上拉載入處理的邏輯是一樣的,則mescrollDown可不用寫了)
            mescrollUp: { // 上拉載入的配置.
                callback: this.upCallback, // 上拉回調,此處簡寫; 相當於 callback: function(page, mescroll) { }
                auto:false, //是否在初始化完畢之後自動執行一次下拉重新整理的回撥 callback
                page: {
                    num: 0, //當前頁 預設0,回撥之前會加1; 即callback(page)會從1開始
                    size: 10, //每頁資料條數,預設10,
                    status:0    // 0 待稽核 1待處理 2待驗收 3已稽核 4已維修 99全部 
                },
            },
            tab1page:1,
            tab2page:1,
            tab3page:1,
            status:99,   // 0 待稽核 1待處理 2待驗收 3已稽核 4已維修 99全部 
            select_type:null,
            repairList0:[],    //對應每一個不同的標籤頁的資料來源
            repairList1:[],
            repairList2:[],
            nodata0:false,     //控制頁面沒有資料情況下的圖片展示,每一個頁面都是獨立的
            nodata1:false,
            nodata2:false,
            show_audit_mes:null,    //校長/非校長狀態碼
        }
    },
 

//頁面掛載階段

  //切換tab
        handTab(i){
            this.count = i;
            switch(this.count){
                case 0:
                    this.status=99;                  
                    this.mescrollUp.page.num=this.tab1page;
                    this.mescrollUp.page.status=0;
                    if(this.repairList0.length ==0){//第一次切換或無資料時才載入資料
                      this.upCallback ( this.mescrollUp.page,this.mescroll)
                    }
                    
                break;
                case 1:
                    this.status=0
                    this.mescrollUp.page.num=this.tab2page;
                    this.mescrollUp.page.status=1;
                    if(this.repairList1.length ==0){//第一次切換或無資料時才載入資料
                      this.upCallback ( this.mescrollUp.page,this.mescroll)
                    }
                break;
                case 2:
                    this.status=3
                    this.mescrollUp.page.num=this.tab3page;
                    this.mescrollUp.page.status=2;
                    if(this.repairList2.length ==0){//第一次切換或無資料時才載入資料
                      this.upCallback ( this.mescrollUp.page,this.mescroll)
                    }
                break;
            }
        },
         // 上拉載入，下拉重新整理
        mescrollInit (mescroll) {
            this.mescroll = mescroll;
        },
        // 上拉回調 page = {num:1, size:10}; num:當前頁 ,預設從1開始; size:每頁資料條數,預設10
        upCallback (page, mescroll) {
            // 聯網請求，獲取申請列表
            var _this =this
            var pageIndex = page.num -1  // 後臺預設資料請求的頁面從0開始
            getrepairRecord(_this.status,_this.select_type,pageIndex,page.size).then((response) => {
                    // 請求的列表資料
                   if( response.res > 0){
                            // 請求的列表資料
                            let arr = response.list;
                            // 如果是第一頁需手動制空列表
                            switch(page.status){
                                case 0:   
                                    _this.tab1page = page.num                                               
                                    if (pageIndex === 0)  _this.repairList0 = []   
                                    _this.repairList0 = this.repairList0.concat(arr)  
                                    if( _this.repairList0.length ==0){
                                            _this.nodata0 = true;
                                        }
                                break;
                                case 1:
                                    _this.tab2page = page.num       
                                    if (pageIndex === 0)  _this.repairList1 = []   
                                        _this.repairList1 = this.repairList1.concat(arr)  
                                    if( _this.repairList1.length ==0){
                                            _this.nodata1 = true;
                                    }
                                break;
                                case 2:
                                    _this.tab3page = page.num       
                                    if (pageIndex === 0)  _this.repairList2 = []   
                                        _this.repairList2 = this.repairList2.concat(arr)  
                                    if( _this.repairList2.length ==0){
                                            _this.nodata2 = true;
                                    }
                                break;           
    
                            }
                            this.$nextTick(() => {
                                mescroll.endSuccess(arr.length)
                            })
                        }
                }).catch((e) => {
                    // 聯網失敗的回撥,隱藏下拉重新整理和上拉載入的狀態;
                    mescroll.endErr()
            })
        },
 

//從詳情頁面返回到列表頁面，儲存離開時的標籤頁：

beforeRouteEnter(to, from, next) {
        next(vm => { // 通過 `vm` 訪問元件例項
            if (from.name == 'wantRepair' && to.name == 'applyManagement') {
                vm.mescrollUp = { // 上拉載入的配置.
                    callback: vm.upCallback, // 上拉回調,此處簡寫; 相當於 callback: function(page, mescroll) { }
                    page: {
                        num:0, //當前頁 預設0,回撥之前會加1; 即callback(page)會從1開始
                        size: 10, //每頁資料條數,預設10,
                        status:0    // 0 待稽核 1待處理 2待驗收 3已稽核 4已維修 99全部
                    },
                };
                vm.tab1page = 1;     //初始化資料
                vm.tab2page = 1;
                vm.tab3page = 1;
                vm.repairList0 = [];
                vm.repairList1 = [];
                vm.repairList2 = [];
                vm.handTab(0);
            }
        });
        next();
    },