35.自定义底部导航的切换图片的效果

简单实现导航上按钮图片的切换

<template>
 <div>
   <div class="footertab" ref="screenHeight">
     <ul>
       <router-link :to="{name:'Home'}" tag="li">
         <div :class="{home:homeSelected, homeNo:homeNo}">
         </div>
         <div class="title">首页</div>
       </router-link>
       <router-link :to="{name:'Cart'}" tag="li">
         <div :class="{cart:cartSelected, cartNo:cartNo}">
         </div>
         <div class="title">购物车</div>
       </router-link>
       <router-link :to="{name:'Mine'}" tag="li">
         <div :class="{mine:mineSelected, mineNo:mineNo}">
         </div>
         <div class="title">我的</div>
       </router-link>
     </ul>
   </div>
 </div>
</template>

<script>
export default {
 name: 'Tabbar',
 props: {
   page: Number
 },
 data () {
   return {
     homeSelected: true,
     homeNo: false,
     cartSelected: true,
     cartNo: false,
     mineSelected: true,
     mineNo: false
   }
 },
 mounted () {
   if (this.page === 0) {
     this.homeNo = false
     this.homeSelected = true
     this.cartSelected = false
     this.cartNo = true
     this.mineSelected = false
     this.mineNo = true
   }
   if (this.page === 1) {
     this.homeSelected = false
     this.homeNo = true
     this.cartSelected = true
     this.cartNo = false
     this.mineSelected = false
     this.mineNo = true
   }
   if (this.page === 2) {
     this.homeSelected = false
     this.homeNo = true
     this.cartSelected = false
     this.cartNo = true
     this.mineSelected = true
     this.mineNo = false
   }
 }
}
</script>

<style scoped lang='less'>
@import "~assets/style/less/tabbar.less";
 .homeNo {
   background-image:url('../../src/assets/image/tab/ic_home_unfocused.png');
 }
 .home {
   background-image:url('../../src/assets/image/tab/ic_home_focused.png');
 }
 .cartNo {
   background-image:url('../../src/assets/image/tab/ic_cart_unfocused.png');
 }
 .cart {
   background-image:url('../../src/assets/image/tab/ic_cart_focused.png');
 }
 .mineNo{
   background-image:url('../../src/assets/image/tab/ic_mine_unfocused.png');
}
 .mine {
   background-image:url('../../src/assets/image/tab/ic_mine_focused.png');
 }

</style>