一 点睛
当设置 position 为 top 时，将不会显示 icon。
tabBar 中的 list 是一个数组，只能配置最少2个，最多5个 tab ，tab 按数组的顺序排序。
二 代码
1 配置 pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message",
"style":{
"navigationBarTitleText":"信息页",
"navigationBarBackgroundColor":"#007AFF",
"h5":{
"pullToRefresh":{
"color":"#7D26CD"
}
}
}
},
{
"path": "pages/index/index"
},
{
"path": "pages/contact/contact"
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "绿帽子",
"navigationBarBackgroundColor": "#7FFF00",
"backgroundColor": "#7CCD7C",
"enablePullDownRefresh": true,
"backgroundTextStyle":"light"
},
"tabBar":{
"color":"#F0AD4E",
"selectedColor":"#4CD964",
"backgroundColor":"#007AFF",
"borderStyle":"black",
"list":[
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/1237644.png",
"selectedIconPath":"static/tabs/1237719.png"
},
{
"text":"信息页",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/1246271.png",
"selectedIconPath":"static/tabs/1262419.png"
},
{
"text":"我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/1262419.png",
"selectedIconPath":"static/tabs/1289167.png"
}
]
}
}
2 新建 contact.vue
<template>
<view>联系我们</view>
</template>
<script>
</script>
<style>
</style>
三 效果
