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

今天药忘吃喽~ 2022-11-25 10:19 328阅读 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 条评论，328人围观）

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

相关阅读

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

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

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

相关微信小程序（跳页之tabBar导航跳转）

tabBar小程序导航简介：小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以

左手的ㄟ右手/ 2023年06月16日 08:11/ 0 赞/ 26 阅读

相关微信小程序（跳页之tabBar导航跳转）

tabBar小程序导航简介小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab

小鱼儿/ 2023年06月16日 08:07/ 0 赞/ 27 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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