美食杰，菜谱大全，loading事件和对应内容显示实现效果

Posted 2021-10-30 YangHuan3

这篇文章是根据上篇文章：美食杰，菜谱大全组件中，零碎的组件实现效果（三）_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