[JavaScript知识库]vue美食杰项目菜谱大全，loading事件实现效果（二）

这篇文章是根据上篇文章: vue美食街项目之菜谱大全实现效果（一）
思路：
1.实现loading加载页的数据
2.首先要将后端数据获取到，这个就是 import {getMenus} from ‘@/service/api’;，就调用getMenus的方法对其解构
3.调用解构完的data，拿到params传过来的数据，建个空数组来存储数据

this.list = [];
getMenus(params).then(({ data }) => {
     this.list = data.list;
});

1.效果展示


2.视图页面：views
recipe.vue

html
<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"
            @current-change="handlerSelect"
            :hide-on-single-page="true"
          >
          </el-pagination>
        </div>
      </el-main>

3.实现loading加载的效果，在数据加载前拿到路由传递的数据要解构下，然后将请求到的数据params中的page和classify，页面加载时，下面的分页器随之变动，看数据有几条就显示几个同时分页器展示响应的页数

getMenus() {
      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({
          target: ".filter-menus-box",
          text: "Loading...",
          spinner: "el-icon-loading",
          background: "rgba(0,0,0,0.7)",
        });
      });
      this.list = [];
      //请求右侧数据
      getMenus(params).then(({ data }) => {
        if (this.loading) loading.close();
        console.log(data);
        this.loading = false;
        this.list = data.list;
        this.total = data.total;
        this.page = data.current_page;
      });
    },

4.点击右下角改变当前页码数，通过路由来添加数据，点击那个page显示那页的page

 //点击改变当前页
    handlerSelect() {
      this.$router.push({
        query: {
          ...this.$route.query,
          page: this.page,
        },
      });

5.此时的点击事件是点击一二级路由是展示对应的参数（数据），给classify:[], 一个空数组来存储变量

tabClick() {
      const classifyName = this.classifyName;
      const item = this.classify.find(
        (item) => item.parent_type === classifyName
      );
      // item 当前点击到的一级路由（整体数据）
      if (item) {//判断item是为一级还是二级路由
        this.classifyName = item.parent_type; //一级路由的type
        this.classifyType = item.list[0].type;
        this.$router.push({//添加数据
          ...this.$route.query,
          classify: this.classifyType,
        });
      }
    },

6.关于文章中的 this.$nextTick(）：
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；
理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数