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

tabBar小程序导航

简介

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

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

属性	类型	是否必填	描述
tabBar	object	否	底部或顶部tab栏的表现

案例

  "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"
      }
    ]
  },

tabBar配置项下的属性

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

tabBar配置项属性—list

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

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

图片文件夹images

• 在list中需要按钮的图片，在小程序图标直接放在与app.json文件同级即可。
  
• 然后在里面又建了个icons文件夹，专门用于存放图标
• 图标文件夹images/icons
  

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

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

注意：当 position 为 top 时，不显示 icon

tabBar配置项属性

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