VUE——超详细的美食杰项目—瀑布流形式

内容介绍

今天我们要写的是滚动条下拉实现从缓冲中到缓冲完瀑布流形式的效果。
下面看效果图

Home.vue组件

本组件中引入了menu-card 和Waterfall 两个子组件，下面开始获取api中的数据。在moutend中获取getBanner和getMenus的list，把list中的数据在赋值给data 中的banners和getMenus数组

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:5
    }
  },
  mounted(){
   
    getBanner().then(({
    data})=>{
   
      // console.log(data.list);
      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)
    })
  },
  

利用v-for把banners数据渲染出来。banners是本页面的渲染数据。在waterfall标签中自定义一个view事件，从而实现跨组件操作数据。menu-card标签中用绑定info来获取data中的menuList，在menu-card组件中实现渲染数据

<template>
  <div class="home">
    <!-- 轮播 start -->
    <el-carousel :interval="5000