uniapp 静态选项卡
时间: 2025-01-29 10:43:48 浏览: 35
### 创建静态选项卡
在 UniApp 中创建静态选项卡可以通过 `tabBar` 配置来实现。此配置位于项目的根目录下的 `manifest.json` 文件中,具体是在 `"mp-weixin"` 或者通用设置中的 `"app-plus"` 下面的 `tabBar` 字段里[^1]。
下面是一个简单的例子展示如何配置静态选项卡:
#### manifest.json 的 tabBar 设置
```json
{
"appid": "",
"projectname": "yourProjectName",
...
"app-plus": {
...
"tabBar": {
"color": "#000000",
"selectedColor": "#ff0000",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"pagePath": "pages/user/user",
"text": "个人中心"
}
]
}
}
}
```
上述 JSON 片段展示了四个基本标签页:“首页”,“分类”,“购物车” 和 “个人中心”。每个对象都有两个属性:`pagePath` 表示该标签对应的页面路径;`text` 则用于显示底部导航栏上的文本名称[^4]。
对于每一个作为 tabbar 页面的组件来说,在其所在的 `.vue` 文件内不需要额外编写特殊的代码逻辑,只需要确保这些页面被正确地放置于项目内的相应位置即可。当应用启动时会自动加载第一个 Tab 对应的内容,并允许用户点击切换到其他的 Tabs 上去[^3]。
阅读全文
相关推荐

















