vue 底部bottomnav

• Z时代
• 2024-01-10
• 分类：综合

<template>
  <div >
    <div class="tabBar">
    <div class="menu"><p class="cont"> <router-link to='/'><img src="./img/tabBar1.png" alt="" class="src" height="47px" ></router-link><span v-bind:class="{active:routerCurrent==1}"> 首页</span> </p></div>
    <div class="menu"><p class="cont"> <router-link to='/SignIn'><img src="./img/tabBar2.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==2}"> 签到</span> </p></div>
    <div class="menu"><p class="cont"> <router-link to='/prize'><img src="./img/tabBar3.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==3}"> 福利</span> </p></div>
    <div class="menu"><p class="cont"> <router-link to='/my'><img src="./img/tabBar4.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==4}"> 我的</span> </p></div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      routerCurrent :1 ,
    }
  },
  created () {
    this.getRouter();
  },
  watch: {
    $route() {
      this.getRouter();
    }
  },
   methods: {
     //获取当前处于哪一个路由
    getRouter() {
      if (this.$route.path == "/") {
        this.routerCurrent = 1;
      }
      if (this.$route.path == "/SignIn") {
        this.routerCurrent = 2;
      }
      if (this.$route.path == "/prize") {
        this.routerCurrent = 3;
      }
      if (this.$route.path == "/my") {
        this.routerCurrent = 4;
      }
      console.log(this.$route.path);
    },
  },
  mounted () {
  }
}
</script>
<style scoped lang="scss">
  #foot{
    height: 1.47rem;
    position: fixed;
    width: 100vw;
    background: #fff;
    bottom: 0;
    .active{
      color: #e4007f;
    }
    .tabBar{
      margin: 0 0.2rem;
      height:100%;
      display: flex;
      text-align:center;
      display:-webkit-flex;
      flex-wrap:nowrap;
      flex-direction:reverse;
      justify-content:space-between;
      .menu{
        a{
          display: block;
          margin: 0.1rem auto -0.25rem;
        }
        span{
          font-size: 16px;
        }
      }
    }
  }
</style>

　　上面的是组件，下面的是调用

<template>
  <div >
    <div class="head"></div> 
    <div class="pic">
      <div class="cover">
        <i class="el-icon-message"></i>
      </div>
    </div>
      <!-- 底部nav -->
    <foot  :parentMessage="routerPath"></foot>
  </div>
</template>
<script>
import foot from '@/components/foot/foot'
export default {
  data(){
    return{
      routerPath:'' 
    }
  },
  components: {
    foot
  },
  mounted () {
    this.routerPath=this.$route.path
    // console.log(this.$route.path);background: url('../assets/img/my-bg.png') no-repeat;
  }
}
</script>
<style scoped lang="scss">
   #my{
     .pic{
       height: 6.53rem;
        position: relative;
       background-size:cover;
       .cover{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
       }
     }
   }
</style>

以上是 vue 底部bottomnav 的全部内容， 来源链接： utcz.com/z/375445.html