uniapp设置tabbar
时间: 2023-10-31 14:06:10 浏览: 147
uni-app 中设置 tabbar 的步骤如下:
1. 在 pages.json 中设置 tabBar 配置项,例如:
```
"tabBar": {
"color": "#999",
"selectedColor": "#007aff",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/tabbar/mine.png",
"selectedIconPath": "static/tabbar/mine-active.png"
}
]
}
```
2. 在每个页面的 json 文件中设置 `navigationBarTitleText` 属性,例如:
```
{
"navigationBarTitleText": "首页"
}
```
3. 在每个页面的 wxml 文件中添加一个 tabbar 的自定义组件,例如:
```
<custom-tab-bar></custom-tab-bar>
```
其中,`custom-tab-bar` 是自定义组件的名称。
阅读全文