html|美食杰，菜谱大全，loading事件和对应内容显示实现效果（四） vue.js|vue

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

暂时没有过滤出菜谱信息，请选择其他的筛选条件

第四步：实现加载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