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

小鱼儿 2023-06-16 08:07 26阅读 0赞

# tabBar小程序导航 #

### 简介 ###

小程序是一个多tab标签应用（客户端窗口的**底部或顶部**有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。  
![在这里插入图片描述][20191125151238289.png]

*  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
 *  在小程序配置文件里面可以设置tabBar属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tabBar</td> 
   <td>object</td> 
   <td>否</td> 
   <td>底部或顶部tab栏的表现</td> 
  </tr> 
 </tbody> 
</table>

### 案例 ###

"tabBar": { 
        "color": "#666666",
        "selectedColor": "#e1565b",
        "backgroundColor": "#fff5fb",
        "borderStyle": "black",
        "list": [
          { 
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "static/tabs/micro.jpg",
            "selectedIconPath": "static/tabs/micro-on.jpg"
          },
          { 
            "pagePath": "pages/zhuanti/zhuanti",
            "text": "专题",
            "iconPath": "static/tabs/healthy.jpg",
            "selectedIconPath": "static/tabs/healthy-on.jpg"
          },
          { 
            "pagePath": "pages/yuyue/yuyue",
            "text": "预约",
            "iconPath": "static/tabs/appoint.jpg",
            "selectedIconPath": "static/tabs/appoint-on.jpg"
          },
          { 
            "pagePath": "pages/zixun/zixun",
            "text": "咨询",
            "iconPath": "static/tabs/project.jpg",
            "selectedIconPath": "static/tabs/project-on.jpg"
          },
          { 
            "pagePath": "pages/one/one",
            "text": "我的",
            "iconPath": "static/tabs/mine.jpg",
            "selectedIconPath": "static/tabs/mine-on.jpg"
          }
        ]
      },

![在这里插入图片描述][20191125152051732.png]

### tabBar配置项下的属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab 上的文字默认颜色，仅支持十六进制颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab 上的文字选中时的颜色，仅支持十六进制颜色</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab 的背景色，仅支持十六进制颜色</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>string</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabbar 上边框的颜色， 仅支持 black / white</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>无</td> 
   <td>tab 的列表，<strong>最少 2 个、最多 5 个 tab</strong></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>string</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>tabBar 的位置，仅支持 bottom / top</td> 
  </tr> 
 </tbody> 
</table>

###### tabBar配置项属性—list ######

按数组的顺序排序，每个项都是一个对象，其属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>string</td> 
   <td>是</td> 
   <td>页面路径，必须在 pages 中先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>string</td> 
   <td>是</td> 
   <td>tab 上按钮文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>图片路径，icon 大小限制为 40kb，不支持网络图片。当 position 为 top 时，不显示 icon。</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>选中时的图片路径，icon 大小限制为 40kb，不支持网络图片，当 position 为 top 时，不显示 icon。</td> 
  </tr> 
 </tbody> 
</table>

> 图片文件夹images
> 
>  *  在list中需要按钮的图片，在小程序图标直接放在与app.json文件同级即可。  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]
>  *  然后在里面又建了个icons文件夹，专门用于存放图标
>  *  图标文件夹images/icons  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

###### tabBar配置项之list属性配置项—iconPath ######

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>默认图片路径，icon 大小限制为 40kb，不支持网络图片。当 position 为 top 时，不显示 icon</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>选中时的图片路径，icon 大小限制为 40kb，不支持网络图片，当 position 为 top 时，不显示 icon</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]  
**注意：当 position 为 top 时，不显示 icon**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

### tabBar配置项属性 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]

> 以上便是关于tabBar小程序导航的基础配置，后期可能需要动态设置tabBar例如右上角红色消息数等，这些需要调用小程序API，后续涉及到再进行详细介绍。

[20191125151238289.png]: https://img-blog.csdnimg.cn/20191125151238289.png
[20191125152051732.png]: https://img-blog.csdnimg.cn/20191125152051732.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125153556939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125153646983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191125154433115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191125154222249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191125154521382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70