微信小程序开发实战（20）：TabBar导航

今天药忘吃喽~ 2022-11-25 10:19 255阅读 0赞

在很多App中，首页的下方通常会出现3到5个TabBar按钮，如图1所示。通过这些按钮，可以切换到不同的页面。其实这也属于导航的一种方式。

![format_png][]

图1  App中TabBar的效果

其实小程序可以用非常简单的方式来实现这个效果，这一切不需要编写一行JavaScript代码。现在准备3个页面，如果是新建的小程序工程，默认会建立两个页面：index和logs，我们可以再建立一个page页面（新加的页面不要忘了在app.json文件中配置）。包含3个页面的工程结构如图2所示。

![format_png 1][]

图2  工程目录结构

添加TabBar按钮，只需在app.json文件中添加tabBar属性即可，代码如下：

{
       … …
       "tabBar": {
        "color": "#dddddd",                            //  未选中状态按钮文字的颜色
        "selectedColor": "#3cc51f",                   //  选中状态按钮文字的颜色
        "backgroundColor": "#ffffff",                 //  背景色
        "list": [{                                       //  该数组元素表示TabBar按钮
          "pagePath": "pages/index/index",              //  当前按钮指向的页面
          "iconPath": "../../images/face1.png",       //  未被选中时的按钮图像文件路径
          "selectedIconPath": "../../images/face.png", //  被选中时的按钮图像文件路径
          "text": "页面1"
        }, {  
          "pagePath": "pages/logs/logs",                //  当前按钮指向的页面
          "iconPath": "../../images/wechat.png",
          "selectedIconPath": "../../images/wechatHL.png",
          "text": "页面2"
        }
        , {  
          "pagePath": "pages/page/page",                //  当前按钮指向的页面
          "iconPath": "../../images/wechat.png",
          "selectedIconPath": "../../images/wechatHL.png",
          "text": "页面3"
        }
        ]
      }
    }

运行程序后，会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。

![format_png 2][]

图3  带TabBar的小程序

实际上，通过将tabBar的position属性值设为top，会将按钮放到页面上方，不过图像就不会显示了，效果如图4所示。

![format_png 3][]

图4 在页面顶端显示TabBar的效果

[format_png]: /images/20221124/310be5f9ddc34ac4ac19819190607f34.png
[format_png 1]: /images/20221124/9470c4fabf3441718553e1a00969635f.png
[format_png 2]: /images/20221124/1658c73fe55d44c1b897b6aebd21b0af.png
[format_png 3]: /images/20221124/d9f33cb67d054ab0b27d846aac1bbb69.png

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序之如何自定义底部tabbar导航

在app.json里放入tabbar 注释：这里的tabbar不会展示，但是一定要写上 { "pages": [ "pages/in

清疚/ 2023年07月05日 05:24/ 0 赞/ 2 阅读

相关微信小程序 - 底部导航栏配置demo（tabBar）

"tabBar":{ "list":[ { "text":"每周推荐",/显示的文本/

水深无声/ 2023年02月27日 13:55/ 0 赞/ 69 阅读

相关微信小程序[电商]-Tabbar 实现底部导航栏

效果图 > 底部导航的切换效果，首页和我的页面切换的时候走在底部导航，而分类和购物车页面切换会跳转新页面。如果使用[【微信原生的底部tab】][tab]是没法实现这个效果

太过爱你忘了你带给我的痛/ 2023年02月23日 03:56/ 0 赞/ 103 阅读

相关微信小程序开发实战（20）：TabBar导航

在很多App中，首页的下方通常会出现3到5个TabBar按钮，如图1所示。通过这些按钮，可以切换到不同的页面。其实这也属于导航的一种方式。 ![format_png][]

今天药忘吃喽~/ 2022年11月25日 10:19/ 0 赞/ 256 阅读

相关微信小程序开发实战（19）：页面导航

在前面的章节尽管介绍了很多API和组件，但所有的代码都放在了一个页面中（布局放在了wxml文件中，JS代码写在了js文件中），然而，对于一个有实际应用价值的小程序，不可能只有一

刺骨的言语ヽ痛彻心扉/ 2022年11月25日 00:58/ 0 赞/ 331 阅读

相关微信小程序—tabBar底部导航中文注解api

[微信小程序][Link 1]tabBar底部导航中文注解api，信小程序tabBar就是app底部的那个导航栏，可以放1-5导航链接，这里对微信小程序底部导航tabbar的中

￡神魔★判官ぃ/ 2022年06月10日 07:55/ 0 赞/ 283 阅读

相关微信小程序开发实战

自从小程序对个人开发者开放以来，就一直想着做一个自己的小程序，再关联到自己的公众号。小程序截图 ![这里写图片描述][20170613090925118] ![这里

冷不防/ 2022年05月28日 02:24/ 0 赞/ 470 阅读

相关微信小程序自定义 tabbar

一定的需求情况下，无法使用小程序原生的 `tabbar` 的时候，需要自行实现一个和 `tabbar` 功能一模一样的自制组件。查阅了海量的博客和文档之后，亲自踩坑。总结了

怼烎@/ 2022年02月13日 14:27/ 0 赞/ 608 阅读

相关微信小程序开发的坑---tabBar

楼主最近在自己测试一下小程序，昨天下午浪费了楼主上万个脑细胞，百思不得其解为啥小程序的tabBar不显示呢？楼主是通过mpvue来构建项目，项目目录如下： ![water

电玩女神/ 2021年09月17日 23:00/ 0 赞/ 501 阅读

相关微信小程序 tabBar底部/顶部导航栏跳转

api->界面->tabBar 指南->基础能力->自定义tabBar 底部导航栏 (1)最少2个页面,最多5个页面 (2)使

阳光穿透心脏的1/2处/ 2021年07月24日 11:41/ 0 赞/ 844 阅读