一、介绍
美食杰项目的首页是由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)
})
}
总结:
到这里美食杰的首页就介绍完了,祝你生活愉快!