美食杰项目–菜谱大全二
实现效果:
- 点击“炒”,“蒸”等让数据显示出来
- 数据比较多的时候分页的效果
- 每次显示5条数据
- 每次加载时有loading遮罩层加载
效果图展示
出现遮罩层的效果
1.点击时让对应的数据显示出来,这里运用到elmentUI
elementUI点击此处跳转具体查看
:info="list"
所需要打的数据
:current-page.sync="page"
当前页数
@current-change="handlerSelect"
点击改变触发
<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>
2.分页效果存储的数据
从import {getMenus} from '@/service/api'
;中获取数据
在data中定义数据
export default {
components: {MenuCard},
data() {
return {
// 存储右侧主体
list:[],
total:0, //总页数
loading:false, //是否显示遮罩层
page:1,
}
},
3.分页效果
- getMenus()中页码默认值为“1”
- 调用后端请求数据,把请求的数据放在list中,每次加载5条数据
- handlerSelect() 点击谁存到路由中
- 在加载loading是子显示遮罩层
methods: {
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;
this.$nextTick(()=>{
loading = this.$loading({
target:'.filter-menus-box',
text:'Loading...',
spinner:'el-icon-loading',
background:'rgb(0,0,0,0.7)'
})
});
this.list=[];
//请求右侧数据
getMenus(params).then(({data})=>{
if(this.loading) loading.close();
this.loading=false;
// console.log(data)
this.list=data.list;
this.total=data.total;
this.page=data.current_page
})
},
handlerSelect(){
this.$router.push({
query:{
...this.$route.query,
page:this.page
}
})
},
tabClick(){
const classifName =this.classifyName;
const item=this.classify.find(item => item.parent_type === classifName)
// item 是 当前被点击的一级路由
if(item){
this.classifyName = item.parent_type;
this.classifyType = item.list[0].type;
this.$router.push({
query:{
...this.$route.query,
classify:this.classifyType
}
})
}
}
}