vue2.0实现底部导航切换效果

小周sir

发布于 2019-09-23 16:10:00

1.5K0

发布于 2019-09-23 16:10:00

文章被收录于专栏：前端技术开发

使用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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-09-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css