vue2.0實現底部導航切換效果

 使用vue2.0寫移動端的時候，常常會寫底部導航效果，點擊切換路由效果，實現圖片和文字顏色切換。vue2.0也提供了不少ul框架供咱們實現效果，今天就用原生的實現一個底部導航切換，直接上代碼：

效果圖

路由搭建

export default new Router({
  routes: [
    {
      path: "/Home",
      component: Home,
    },
    {
      path: "/recommend",
      component: Recommend
    },
    {
      path: "/search",
      component: Search
    },
    {
      path: "/chat",
      component: Chat
    },
    {
      path: "/me",
      component: Me
    },
　　{
     path: '/',
     redirect: '/home'
   },
  ]
});

　頁面模板搭建，src和on都要動態的綁定，使用三目運算判斷每次點擊切換

<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('/recommend')">
			<img :src="'/recommend' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="推薦">
			<span :class="{on: '/recommend' === $route.path}">推薦</span>
		</div>
    <div class="tab-item" @click="switchTo('/search')">
			<img :src="'/search' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="搜索">
			<span :class="{on: '/search' === $route.path}">搜索</span>
		</div>
    <div class="tab-item" @click="switchTo('/chat')">
			<img :src="'/chat' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="聊天">
			<span :class="{on: '/chat' === $route.path}">聊天</span>
		</div>
    <div class="tab-item" @click="switchTo('/me')">
			<img :src="'/me' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal" alt="個人">
			<span :class="{on: '/me' === $route.path}">個人</span>
		</div>
  </div>

　　在data裏面定義tabBarImgArr:數組，用於存放圖片。

tabBarImgArr:[   //圖片切換
        {normal: require('./../../../static/img/icon_home.png'), selected: require('./../../../static/img/icon_home_selected.png')},
        {normal: require('./../../../static/img/icon_intro.png'), selected: require('./../../../static/img/icon_intro_selected.png')},
        {normal: require('./../../../static/img/icon_search.png'), selected: require('./../../../static/img/icon_search_selected.png')},
        {normal: require('./../../../static/img/icon_chat.png'), selected: require('./../../../static/img/icon_chat_selected.png')},
        {normal: require('./../../../static/img/icon_mine.png'), selected: require('./../../../static/img/icon_mine_selected.png')}
      ]

　在methods實現switchTo切換

methods:{ switchTo(path){ // console.log(this.$router)
      this.$router.replace(path) } }

css樣式效果

.bottom-tab width 100% height 50px background-color #fff position fixed left 0px bottom 0px display flex z-index 999 .tab-item display flex flex 1 flex-direction column align-items center justify-content center font-size 14px color #666 img width 35% margin-bottom 2px .on color red