美食杰，菜譜大全，loading事件和對應內容顯示實作效果（四）

這篇文章是根據上篇文章：美食杰，菜譜大全組件中，零碎的組件實作效果（三）_qianluo111的博客-CSDN博客

續寫的效果，這個效果是展示右側的內容通過最上面的tab切換和左邊的側邊欄來實作的，右側的主體的loading加載和顯示內容主體，

下面開始講解一下我們要實作效果的程序啦！

第一步：先實作我們右側的主體欄的資料，

我們首先要將后端資料獲取到，這個就是 import {getMenus} from '@/service/api';

第二步：呼叫獲取到的資料data將其進行解構，看資料請求的資料中有沒有引數有引數也要拿過來，保存到我們在新建的空陣列list：[ ]中， this.list =data.list;這樣就將資料傳給了我們的空陣列list中，

getMenus(params).then(({data})=>{
          // console.log(data);列印查看一下有沒有獲取到資料
          this.list =data.list;
      })
},

第三步：渲染資料，將在list：[ ]中的資料進行渲染由于右側是一個個的組件，所以我們渲染的是一個組件，還要在data中保存一個總頁數total：0，單頁數page：1，

<el-main class="filter-menus-box" >
     <div class="menu-empty" v-show="!list.length && !loading">暫時沒有過濾出菜譜資訊，請選擇其他的篩選條件</div>
        <menu-card  style="min-height: 75%;" :info="list"></menu-card>
      <!-- 分頁展示 -->
          <div style="text-align: right;" v-show="!loading">
               <el-pagination
                      style="display: inline-block;"
                      :page-size="5"
                      layout="total, prev, pager, next"
                      :total="total"
                      :current-page.sync="page"
                     >
               </el-pagination>
       </div>
</el-main>

第四步：實作加載loading事件，我們都知道loading事件是在生命周期里掛載之前執行的，所以在呼叫資料之前要先獲取路由引數，然后將請求到的資料params中的page和classify，當頁面加載時，下面的分頁器隨之變動，看資料有幾條就顯示幾個同時分頁器展示回應的頁數，多余的頁數用delete query.page;洗掉路由引數頁數和delete query.classify中tab切換欄中的頁數，在進行判斷，當前展示的組件的長度是否于頁碼相等，然后掛載之前顯示this.loading=true;顯示之后清除let loading=null;

getMenuss(){
                const query = {...this.$route.query};
                const params={
                    page:query.page || "1",
                    classify:query.classify
                };
                delete query.page;洗掉多余的頁碼
                delete query.classify洗掉多余不符合的資料
                if (Object.keys(query).length) {//判斷組件長度是否于頁碼長度相等
                    params.property = {
                        ...query
                    }
                }
                this.loading=true;//掛載之前顯示
                let loading=null;//掛載完畢之后消失
}

第五步：掛載之后，掛載完畢之后我們要用到nextTick（）方法，在我們下一次獲取資料的時候需要執行延遲回呼，

this.$nextTick(()=>{
             loading=this.$loading({//這是我們加載loading時間是要實作的
              target:'.filter-menus-box',//找到我們的事件源，也就是我們要有遮蓋層的部分，記得class類名的點不能少
              text:'Loading...',加載時顯示的文本
              spinner:'el-icon-loading',//展示轉圈圈的圖示
               background:'rgba(0,0,0,0.7)'//背景顏色的改變
           })
});
 this.list=[];//掛載之后將list資料存盤展示

第六步：展示程序，當loading加載前資料不顯示，加載完成后在顯示，

getMenus(params).then(({data})=>{
                    if (this.loading) {
                        loading.close();//資料加載之后將loading事件進行關閉
                    }
           this.loading=false;
          // console.log(data);
         this.list =data.list;
         this.total =data.total;
        this.page=data.current_page;//當前組件賦值給頁碼
})

第七步：是頁碼的實作，點擊改變當前頁碼，通過寫一個方法，當點擊左側欄或tab切換欄時監聽路由并添加回應的內容，

 handlerSelect(){
             console.log("改變頁碼");
             this.$router.push({通過路由添加相應的頁碼和路由引數
         query:{
             ...this.$route.query,
             page:this.page
       }
    })
},

第八步：也就是tab切換一二級路由是展示的內容，先將classify中的資料賦值給一個空變數中存起來，然后找到classify中相應的資料，根據路由添加回應的內容，

tabClick(){
         const classifName=this.classifyName;//將classifyName定義重繪的tab值賦值給一個空變數
         const item=this.classify.find(item => item.parent_type === classifName);//找到classify中的資料存盤在item中
                // console.log(item);
                //item 是當前被點擊到的一級路由（整體資料）
                if (item) {
                    this.classifyName=item.parent_type//一級路由
                    this.classifyType=item.list[0].type
                    this.$route.push({
                        query:{
                            ...this.$route.query,
                            classify:this.classifyType
                        }
                    })
                }
           }

這樣就實作了我們想要的效果，本片文章主要是講解了，顯示主體，分頁器，遮罩層，這些效果運用了element-ui組件，不會使用這個組件的可以去看一下餓了么組件庫的官網哦！

這里我把組件庫官網的鏈接拿到了，省了你們去搜索的時間，組件 | Element