05-配置基本的tabbar

配置tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。
注意：

• 当设置 position 为 top 时，将不会显示 icon
  
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

案例代码：

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/message/message",
            "style" : {
                "navigationBarTitleText":"信息页",
                "navigationBarBackgroundColor":"#007AFF",
                //可以给H5设置单独的样式，当然其他平台也是可以的
                "h5":{
                    "pullToRefresh":{
                        "color":"#4CD964"
                    }
                }
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                // "navigationBarTitleText": "uni-app"
            }
        }
        ,{
            "path" : "pages/contact/contact",
            "style" : {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "逻辑药师",
        "navigationBarBackgroundColor": "#007AFF",
        "backgroundColor": "#7CCD7C",
        "enablePullDownRefresh":true,
        "backgroundTextStyle":"dark"
    },
    "tabBar":{
        "list":[
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            {
                "text":"信息",
                "pagePath":"pages/message/message",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            {
                "text":"我们",
                "pagePath":"pages/contact/contact",   //跳转的路径
                "iconPath":"static/tabs/contact.png",  //样式
                "selectedIconPath":"static/tabs/contact-active.png"  //选中后的样式
            }
        ]
    }
}