uniapp好看导航栏

### 创建美观的 UniApp 导航栏 #### 使用全局统一设置导航栏样式 为了使整个应用具有一致性的外观，在 `manifest.json` 文件中的 `app-plus` 节点下可以配置通用属性来设定默认状态下的导航条背景色和其他参数[^1]。 ```json { "appid": "", "name": "YourAppName", ... "app-plus":{ "navigationBarTextStyle":"black", // 文字颜色 "navigationBarTitleText":"首页",// 标题文字内容 "navigationBarBackgroundColor":"#ffffff" // 导航条背景颜色 } } ``` #### 单页个性化定制 对于特定页面想要有不同的风格，则可以在对应的 `.vue` 页面文件夹里的 `pages.json` 配置该页面独有的导航栏特性。 ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "个性化的页面名称", "navigationBarBackgroundColor": "#ff0000" } } ``` #### 动态改变导航栏显示效果 如果希望在运行期间依据某些条件实时更新界面元素，那么可以通过调用 API 函数如 `uni.setNavigationBarColor()` 或者利用框架提供的生命周期钩子函数配合 JavaScript 实现逻辑控制。 ```javascript onLoad() { uni.setNavigationBarColor({ frontColor:'#000000', backgroundColor:'#FFFFFF' }); }, methods:{ changeNavStyle(){ const newBgColor = this.isDay ? '#FFFFFF' : '#000000'; uni.setNavigationBarColor({frontColor:this.getFrontColor(newBgColor),backgroundColor:newBgColor}); }, getFrontColor(bg){ return bg ==='#FFFFFF'? '#000000':'#FFFFFF'; } } ``` #### 自定义组件方式构建复杂布局 当项目需求较为复杂时，考虑采用自定义组件的方式来自由设计更加丰富的交互体验。比如引入 Vant Weapp 组件库并结合官方文档说明完成更高级别的功能开发[^2]。 ```html <!-- App.vue --> <template> <div id="app"> <!-- 应用根节点 --> <tab-bar /> </div> </template> <script> import TabBar from './components/TabBar'; export default { components: { TabBar }, }; </script> ``` ```html <!-- src/components/TabBar.vue --> <template> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o">标签</van-tabbar-item> <van-tabbar-item icon="search-o">标签</van-tabbar-item> <van-tabbar-item icon="friends-o">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item> </van-tabbar> </template> <script> export default { data() { return { active: 0, }; }, }; </script> ```