美食杰项目--菜谱大全二

美食杰项目–菜谱大全二

实现效果:
  1. 点击“炒”,“蒸”等让数据显示出来
  2. 数据比较多的时候分页的效果
  3. 每次显示5条数据
  4. 每次加载时有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
                      }
                  })
                }
            }
   }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值