Vue.js前端框架实现：头部、轮播图与内容分页加载-优快云博客

美食杰效果图展示

需要实现的一些效果

头部
轮播图
内容：需要没5个加载一次

在这里插入图片描述

$\color{YellowGreen}{1.头部的效果代码}$

头部主要效果：登录，退出，个人主页，发布菜谱

<template>
  <el-header style="height: auto;">
    <div class="header">
      <div class="header_c">
        <el-row type="flex" justify="start" align="middle">
          <el-col :span="6">
            <a href="" class="logo">
            </a>
          </el-col>
          <el-col :span="10" :offset="2"></el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-show="isLogin">
            <router-link :to="{name:'space'}">
              <el-avatar style="vertical-align: middle;" shape="square" size="medium" 
              :src="userInfo.avatr">
              </el-avatar>
            </router-link>
            <router-link :to="{name:'space'}" class="user-name">{{userInfo.name}}</router-link>
            <router-link to="" class="collection">发布菜谱</router-link>
            <a href="javascript:;" class="collection" @click="exit">退出</a>
          </el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-show="!isLogin">
            <router-link :to="{name:'login'}" class="user-name" >登录</router-link>
            <router-link :to="{name:'login'}" class="collection">注册</router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav_c">
        <Menus></Menus>
      </div>
    </div>
  </el-header>
</template>
<script>
import Menus from '@/components/menus'
import {login_out} from '@/service/api'
export default {
  name: 'headers',
  components: {Menus},
  computed:{
     isLogin(){
       return this.$store.getters.isLogin;
     },
     userInfo(){
       return this.$store.state.userInfo;
     }
  },
  methods:{
    exit(){
      this.$confirm('真的退出吗？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(async()=>{
        const data=await login_out();
        localStorage.removeItem('token');
        window.location.href='/';
        
        })
    }


  }
}
</script>
<style lang="stylus">
.header 
  height 129px
  background-color #c90000
   
  .logo 
    display: block;
    height: 129px;
    width: 184px;
    background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;


.header_c, .nav_c
  width 990px
  margin 0 auto 
.nav-box 
  height 60px
  background-color #fff;
  box-shadow 10px 0px 10px rgba(0,0,0,0.3)




.user-name
  margin-left 5px
  color #fff


.collection 
  margin-left 5px  
  color #fff


</style>

$\color{YellowGreen}{2.轮播图效果代码}$

这里用到了Element UI框架，具体操作请文章结尾观看。

<template>
  <div class="home">
    <!-- 轮播 start -->
    <el-carousel :interval="5000" type="card" height="300px">
      <el-carousel-item v-for="item in banners" :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>
    <!-- 轮播 end -->
    <!-- 内容精选 瀑布流形式 start -->
    <div>
      <h2>内容精选</h2>
      <!-- :info='info' -->
      <waterfall ref="waterfall" @view="loadingMenuHanle">
        <menu-card :margin-left="13" :info="menuList"></menu-card>
      </waterfall>
    </div>
    <!-- 内容精选 瀑布流形式 end -->
  </div>
</template>


<script>
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,
        
    }
  },
  mounted(){
     getBanner().then(({data})=>{
      //  console.log(data)
       this.banners=data.list
     })


     getMenus({page:this.page}).then(({data})=>{
       console.log(data)
      this.menuList=data.list;//存了第一页的五条
      this.pages=Math.ceil(data.total / data.page_size)
      
     });
  },
  methods:{
     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(({data})=>{
       this.menuList.push(...data.list);
       this.$refs.waterfall.isloading=false
      
       })


     }
  }
}
</script>
<style lang="stylus">
.home 
  h2
    text-align center
    padding 20px 0;


  .el-carousel__item h3 
    color #475669
    font-size 14px
    opacity 0.75
    line-height 200px
    margin 0
  


  .el-carousel__item:nth-child(2n) 
    background-color #99a9bf
  


  .el-carousel__item:nth-child(2n+1) 
    background-color #d3dce6
  
</style>

$\color{YellowGreen}{3.内容部分}$
在这里插入图片描述
当滚动条向下滑动时，每次加载出5条菜谱，依次加载。

<template>
  <div class="waterfall" ref="waterfall">
    <slot></slot>
    <div class="waterfall-loading" ref='loading' v-show="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
      if(this.$refs.waterfall.getBoundingClientRect().bottom<document.documentElement.clientHeight){
           console.log("到达可视区"); 
           this.isloading=true  
           this.$emit("view")
      }
    }
  }
}
</script>
<style lang="stylus">
.waterfall-loading
  width 100%
  height 20px
  text-align center
</style>