写vue项目自定义tab主页

最新推荐文章于 2024-07-13 16:46:11 发布

Teamig

最新推荐文章于 2024-07-13 16:46:11 发布

阅读量916

点赞数 1

分类专栏：写vue项目衍生出来的关于vue的问题文章标签： vue

本文链接：https://blog.csdn.net/Teamig/article/details/106861792

版权

写vue项目衍生出来的关于vue的问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

做出来的效果图

底部tab页面自定义效果

1、首先定义路由

在路由index.js页面中定义五个子路由，如图


Vue.use(VueRouter)

  const routes = [
    
  {
    path: '/',
    redirect: '/index'
  },

 {
    path:'/index',
    name:'Index',
    redirect:'/home',
    component:Index,
    children:[
      {
        path:'/home',
        name:'Home',
        component:Home
      },
      {
        path:'/plan',
        name:'Plan',
        component:Plan
      },
      {
        path:'/clock',
        name:'Clock',
        component:Clock
      },
      {
        path:'/free',
        name:'Free',
        component:Free
      },
      {
        path:'/user',
        name:'User',
        component:User
      }
    ]
  },

2.其中主页面Index.vue页面中代码如图

<template>
    <div>
        <div id="container" >
            <!-- 视图容器 -->
            <router-view></router-view>
        </div>
        <div class="bottom-tab">
            <div class="tab-item" @click="switchTo('/home')">
                    <img :src="'/home' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="首页">
                    <span :class="{on: '/home' === $route.path}">首页</span>
                </div>
            <div class="tab-item" @click="switchTo('/plan')">
                    <img :src="'/plan' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="计划">
                    <span :class="{on: '/plan' === $route.path}">计划</span>
                </div>
            <div class="tab-item" @click="switchTo('/free')">
                    <img :src="'/free' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="免费领" class="bigimg">
                    <span :class="{on: '/free' === $route.path}">免费领</span>
                </div>
            <div class="tab-item" @click="switchTo('/clock')">
                    <img :src="'/clock' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="打卡">
                    <span :class="{on: '/clock' === $route.path}">打卡</span>
                </div>
            <div class="tab-item" @click="switchTo('/user')">
                    <img :src="'/user' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="我的">
                    <span :class="{on: '/user' === $route.path}">我的</span>
                </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            tabBarImgArr:[   //图片切换
                {normal: require('../../styles/img/tabimg/home_1.png'), selected: require('../../styles/img/tabimg/home.png')},
                {normal: require('../../styles/img/tabimg/plan_1.png'), selected: require('../../styles/img/tabimg/plan.png')},
                {normal: require('../../styles/img/tabimg/content.png'), selected: require('../../styles/img/tabimg/content.png')},
                {normal: require('../../styles/img/tabimg/clock_1.png'), selected: require('../../styles/img/tabimg/clock.png')},
                {normal: require('../../styles/img/tabimg/user_1.png'), selected: require('../../styles/img/tabimg/user.png')}
            ]
        }
    },
    methods:{
    switchTo(path){
      // console.log(this.$router)
      this.$router.replace(path)
    }
  }
}
</script>
<style scoped>
.bottom-tab{
    width:100%;
    height:126px;
    background-color:#fff;
    position:fixed;
    left :0px;
    bottom :0px;
    display :flex;
    z-index :999;
    box-shadow:0px 0px 8px 0px rgba(213,213,213,0.24);
    }
.tab-item{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#666;
}
.tab-item img{
        width: 44px;
        height: 44px;
        margin-bottom:2px;
}
.tab-item .bigimg{
        width: 90px;
        height: 90px;
        margin-bottom:0px;
        margin-top: -45px;
}
.on{
        color :#FECC35; 
}
        
        
      
</style>