小程序页面跳转TabBar与switchTab链接使用方法

以下来源于微信小程序官网 

TabBar的属性

设置字体【选中与未选中的】：颜色、​​​​边框、list

list里面添加文字、图标未点击地址、与选中之后地址

 

属性位置

 以下个人制作(*^▽^*)！！！！

TabBar的代码：

   "tabBar": {
      "color": "#7A7E83",
      "selectedColor": "#0096ff",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "list": [
        {
          "pagePath": "pages/homePage/homePage",
          "iconPath": "pages/image/grzx.png",
          "selectedIconPath": "pages/image/grzx_an.png",
          "text": "个人中心"
        },
        {
          "pagePath": "pages/sbgl/sbgl",
          "iconPath": "pages/image/sbgl.png",
          "selectedIconPath": "pages/image/sbgl_an.png",
          "text": "设备管理"
          
        },
        {
          "pagePath": "pages/message/message",
          "iconPath": "pages/image/wdxx.png",
          "selectedIconPath": "pages/image/wdxx_an.png",
          "text": "我的消息"
        },
        {
          "pagePath": "pages/syzx/syzx",
          "iconPath": "pages/image/syzx.png",
          "selectedIconPath": "pages/image/syzx_an.png",
          "text": "收益中心"
        }
        
      ]
    }

TabBar的效果图： 

TabBar的代码效果

 

当你写完TabBar你会发现TabBar用过的链接在使用，页面就无法跳转

TabBar与navigator都使用同一个链接的时候

 

正常使用navigator-------TabBar与navigator都使用同一个链接的时候

这个时候就要用到switchTab

添加open-type='switchTab'

就可以正常跳转页面了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~