美食杰项目-首页

一、介绍

美食杰项目的首页是由header和home两个组件构成，组件里面使用了element组件库，实现了轮播图、下拉显示的效果

二、步骤

1、安装element组件库

npm i element-ui -S

 2.在home组件的mounted里通过api向后端请求轮播图数据，再通过element进行渲染，代码如下：

获取数据：

getBanner().then(res => {
   this.bannerList = res.data.list
})

渲染：

<el-carousel :interval="5000" type="card" height="300px">
      <el-carousel-item
        v-for='item in bannerList'
        :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>

 api：

export async function getBanner(){
  // console.log(await http.get('/banner'));
  return await http.get('/banner');
}

3.首先在home组件里的mounted里通过api向后端请求数据内容精选的第一页，并赋值给data里面的数组menuList，传递给子组件menu-card，代码如下：

获取数据：

getMenus({page:this.page}).then(res=>{
  this.menuList=res.data.list//存了第一页的五条      
  this.pages=Math.ceil(res.data.total/res.data.page_size)
})

传递数据：

 <div>
      <h2>内容精选</h2>
      <!-- :info='info' -->
      <waterfall ref="waterfall" @view='loadingMenuHanle()'>
        <menu-card :margin-left="13" :info="menuList"></menu-card>
      </waterfall>
    </div>

api：

export async function getMenus(params){
  return await http.get('/menu/query', {params});
}

 menu-card组件：

从menu-card组件里面获取父组件home传递的info，通过v-for遍历，进行渲染

<template>
  <el-row class="menu-card" type="flex" justify="start">
    <el-col
      style="flex:none;" 
      :style="{'margin-left':marginLeft+'px'}"
      v-for='item in info' :key='item._id'
    >
      <el-card :body-style="{ padding: '0px' }">
        <router-link :to='{name:"detail",query:{memuId:item._id}}'>
          <img :src="item.product_pic_url" class="image" style="width: 232px;height: 232px;">
          <div style="padding: 14px;" class="menu-card-detail">
            <strong>{{item.title}}</strong>
            <span>{{item.comments_len}} 评论</span>
            <router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">
            {{item.name}}
            </router-link>
          </div>
        </router-link> 
      </el-card>
    </el-col>
  </el-row>
</template>
<script>

export default {
  name: 'menu-card',
  props:{
    marginLeft: {
      type: Number,
      default: 22
    },
    info:{
      type: Array,
      default:() => []
    }
  }
}
</script>

waterfall组件：

通过滚动事件进行判断，当从可视窗上边到waterfall元素下边小于可视窗高的时候，调用父组件home的事件loadingMenuHanle。

<template>
  <div class="waterfall" ref="waterfall">
    <slot></slot>
    <div class="waterfall-loading" ref='loading' v-if="isloading">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>
<script>
import {throttle} from 'throttle-debounce'
export default {
  name: 'Waterfall',
  data(){
    return {
      isloading:false
    }
  },
  mounted(){
    this.scrollHanle=throttle(300,this.scroll.bind(this))
    window.addEventListener('scroll',this.scrollHanle)
  },
  destroyed(){
    window.removeEventListener('scroll',this.scrollHanle)
  },
  methods:{
    scroll(){
      if(this.isloading) return
      // console.log(this.$refs.waterfall.getBoundingClientRect().bottom,document.documentElement.clientHeight);
      if(this.$refs.waterfall.getBoundingClientRect().bottom < document.documentElement.clientHeight){
        // console.log('已到达可视区')
        this.isloading=true
        this.$emit('view')
      }
    }
  }
}
</script>

loadingMenuHanle（）事件：

判断当前页数（page）大于总页数（pages）结束运行。如果小于总页数，向后添加到数组menuList里面。

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(res=>{
        this.menuList.push(...res.data.list)
        this.$refs.waterfall.isloading=false
        // console.log(this.pages,res,this.menuList)
      })
    }

 总结：

到这里美食杰的首页就介绍完了，祝你生活愉快！