uniapp 底部原生tabar 首页的时候显示黑色背景 其他显示白色背景
时间: 2025-01-26 08:11:05 浏览: 45
在uniapp中,如果你希望底部原生tabar在首页显示黑色背景,而在其他页面显示白色背景,可以通过以下步骤实现:
1. **设置tabar的背景颜色**:在`pages.json`文件中配置tabar的背景颜色。
2. **动态更改tabar背景颜色**:在首页和其他页面的生命周期钩子中,通过`uni.setTabBarStyle`方法动态更改tabar的背景颜色。
以下是一个示例代码:
```json
// pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/other/other",
"style": {
"navigationBarTitleText": "其他页面"
}
}
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/other/other",
"text": "其他"
}
],
"backgroundColor": "#000000" // 默认背景颜色为黑色
}
}
```
```javascript
// pages/index/index.vue
<script>
export default {
onShow() {
uni.setTabBarStyle({
backgroundColor: '#000000' // 首页显示黑色背景
});
}
}
</script>
```
```javascript
// pages/other/other.vue
<script>
export default {
onShow() {
uni.setTabBarStyle({
backgroundColor: '#FFFFFF' // 其他页面显示白色背景
});
}
}
</script>
```
通过上述配置,当用户切换到首页时,tabar的背景颜色会变为黑色;当切换到其他页面时,tabar的背景颜色会变为白色。
阅读全文
相关推荐


















