微信小程序（跳页之tabBar导航跳转）_微信小程序,底部栏跳转图片没变-优快云博客

本文链接：https://blog.youkuaiyun.com/woshierdanya/article/details/100022842

本文介绍了微信小程序中TabBar的配置与导航，包括在app.json全局配置文件中设置tabBar的各项属性，如文字颜色、选中颜色、背景色、边框样式，以及如何在list中配置按钮的图标路径，同时提到了position属性对icon显示的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tabBar小程序导航
小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。
在这里插入图片描述
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
在小程序配置文件里面可以设置tabBar属性：
案例：

"tabBar":{
    
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"首页",
        "iconPath":"images/icons/home.png",
        "selectedIconPath":"images/icons/home_selected.png"
      },
      {
        "pagePath": "pages/market/market",
        "text": "商城",
        "iconPath": "images/icons/hyper.png",
        "selectedIconPath": "images/icons/hyper_selected.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单",
        "iconPath": "images/icons/order.png",
        "selectedIconPath": "images/icons/order_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/icons/mine.png",
        "selectedIconPath": "images/icons/mine_selected.png"
      }
    ]
  },

在这里插入图片描述
tabBar配置项下的属性：

tabBar配置项属性—color

1.设置文字默认颜色为：#515151

tabBar配置项属性—selectedColor

2.设置选中时文字颜色为蓝色 #1296db

3.tabBar配置项属性—backgroundColor

设置背景色为灰色：#e6e4e4
在这里插入图片描述、

4.tabBar配置项属性—borderStyle

5.tabBar配置项属性—list

6.tabBar配置项属性—list

图片文件夹images
在list中需要按钮的图片，在小程序图标直接放在与app.json文件同级即可。

在里面新建一个icons文件夹，存放图标
在这里插入图片描述
tabBar配置项之list属性配置项—iconPath

7.tabBar配置项属性—position

注意：当 position 为 top 时，不显示 icon图标
tabBar配置项属性