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

 使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换。vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码:

效果图

路由搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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: '/',<br>     redirect: '/home'<br>   },
  ]
});

 页面模板搭建,src和on都要动态的绑定,使用三目运算判断每次点击切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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:数组,用于存放图片。

1
2
3
4
5
6
7
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
复制代码

 

posted @   小周sri的码农  阅读(14658)  评论(1编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
历史上的今天:
2017-09-10 DOM节点删除之empty和remove区别
点击右上角即可分享
微信分享提示