美食杰项目---首页

文章目录

• 前言
• 一、介绍美食杰项目首页是怎么实现的？
• 二、步骤
  • 1.展示美食杰首页效果
  • 2.代码
  • 3.注意事项
• 总结

---

前言

本文想给大家介绍美食杰项目实现效果，首先介绍的是美食杰首页实现效果以及主要代码

---

一、介绍美食杰项目首页是怎么实现的？

1.先向后端请求数据，然后获取数据，渲染数据

2.通过Element ui   组件库来实现轮播图效果

3.刷新之后会继续加载出图片

二、步骤 

展示美食杰首页效果:

代码:

1.在main.js里面引入Element UI:

import ElementUI from 'element-ui';

  

 2.在终端里面下载Element UI 组件库：

        npm i  element ui

  3.在header.vue组件中写如下代码：

<template>
  <div class="home">
    <!-- 轮播 start -->
    <el-carousel :interval="5000" type="card" height="300px">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <!--/detail?menuId=5d83bfba2f7cb93a4009cf98-->
        <router-link :to="{ name: 'detail', query: { memuId: item._id } }">
          <img :src="item.product_pic_url" width="100%" alt="" />
        </router-link>
      </el-carousel-item>
    </el-carousel>
    <!-- 轮播 end -->
    <!-- 内容精选 瀑布流形式 start -->
    <div>
      <h2>内容精选</h2>
      <!-- :info='info' -->
      <waterfall ref="waterfall" @view="loadingMenuHanle">
        <menu-card :margin-left="13" :info="menuList"></menu-card>
      </waterfall>
    </div>
    <!-- 内容精选 瀑布流形式 end -->
  </div>
</template>

<script>
import MenuCard from "@/components/menu-card.vue";
import Waterfall from "@/components/waterfall.vue";
import { getBanner, getMenus } from "@/service/api.js";
// 引入 注册 使用
export default {
  name: "home",
  components: {
    MenuCard: MenuCard,
    Waterfall,
  },
  data() {
    return {
      banners: [],
      menuList: [],
      page: 1,
      pages: 3,
    };
  },
  mounted() {
    getBanner().then(({ data }) => {
      console.log(data);
      this.banners = data.list;
      console.log(this.banners);
    });
    getMenus({ page: this.page }).then(({ data }) => {
      console.log(data);
      this.menuList = data.list;
      this.pages = Math.ceil(data.total / data.page_size);
    });
  },
  methods: {
    loadingMenuHanle() {
      console.log("在外部监听的滚动");

      this.page++;
      if (this.page > this.pages) {
        this.$refs.waterfall.isloading = false;
        return;
      }
      this.$refs.waterfall.isloading = true;

      getMenus({ page: this.page }).then(({ data }) => {
        this.menuList.push(...data.list);
        this.$refs.waterfall.isloading = false;
      });
    },
  },
};
</script>
<style lang="stylus">
.home
  h2
    text-align center
    padding 20px 0;


  .el-carousel__item h3
    color #475669
    font-size 14px
    opacity 0.75
    line-height 200px
    margin 0



  .el-carousel__item:nth-child(2n)
    background-color #99a9bf



  .el-carousel__item:nth-child(2n+1)
    background-color #d3dce6
</style>

 注意事项：

1.在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态

2.渲染数据的时候注意查看data中的数据

---

总结
以上就是今天要讲的内容，本文仅仅简单介绍了美食杰项目首页，用vue框架来写的，写轮播图的时候用到了Element UI。