uni-app 之 设置导航

uni-app 提供了一系列 API 来动态设置页面导航栏的样式和状态，帮助开发者创建更丰富的用户界面体验。

1. uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题

参数说明

示例代码

uni.setNavigationBarTitle({title:"新的页面标题",});

2. uni.setNavigationBarColor(OBJECT)

设置页面导航条颜色

参数说明

animation 参数说明

示例代码

// 设置导航栏颜色uni.setNavigationBarColor({frontColor:"#ffffff",backgroundColor:"#007AFF",animation:{duration:400,timingFunc:"easeIn",},});

3. uni.showNavigationBarLoading(OBJECT)

在当前页面显示导航条加载动画

参数说明

示例代码

// 显示导航栏加载动画uni.showNavigationBarLoading();

4. uni.hideNavigationBarLoading(OBJECT)

隐藏导航条加载动画

参数说明

示例代码

// 隐藏导航栏加载动画uni.hideNavigationBarLoading();

5. uni.hideHomeButton(OBJECT)

隐藏返回首页按钮

参数说明

示例代码

// 隐藏返回首页按钮uni.hideHomeButton();

完整示例

exportdefault{data(){return{pageTitle:"商品详情",};},onLoad(){// 设置页面标题uni.setNavigationBarTitle({title:this.pageTitle,});// 设置导航栏颜色uni.setNavigationBarColor({frontColor:"#ffffff",backgroundColor:"#007AFF",});},methods:{// 页面数据加载loadData(){// 显示导航栏加载动画uni.showNavigationBarLoading();// 模拟异步请求setTimeout(()=>{// 隐藏导航栏加载动画uni.hideNavigationBarLoading();// 更新页面标题uni.setNavigationBarTitle({title:"最新商品详情",});},2000);},// 改变导航栏主题changeTheme(theme){if(theme==="light"){uni.setNavigationBarColor({frontColor:"#000000",backgroundColor:"#ffffff",});}elseif(theme==="dark"){uni.setNavigationBarColor({frontColor:"#ffffff",backgroundColor:"#007AFF",});}},// 隐藏返回首页按钮hideHomeButton(){uni.hideHomeButton({success:()=>{console.log("返回首页按钮已隐藏");},});},},};

页面配置方式

除了使用 API，也可以在页面的 .vue 文件中通过配置来设置导航栏：

exportdefault{style:{navigationBarTitleText:"页面标题",navigationBarBackgroundColor:"#007AFF",navigationBarTextStyle:"white",navigationStyle:"default",// 'default' 或 'custom'},};

注意事项

1. frontColor仅支持#ffffff和#000000两种颜色值
2. backgroundColor必须是有效的十六进制颜色值
3. 在 Android 平台上，某些机型可能不支持动态修改导航栏颜色
4. hideHomeButton仅在微信小程序等特定平台有效
5. 导航栏加载动画在不同平台的表现可能略有差异
6. 页面跳转时，导航栏设置会恢复为页面配置中的默认值
7. 使用custom导航栏样式时，需要自行实现导航栏布局

实际应用场景

// 商品详情页示例exportdefault{methods:{asyncloadProductDetail(productId){// 显示加载状态uni.showNavigationBarLoading();uni.setNavigationBarTitle({title:"加载中..."});try{constproduct=awaitthis.fetchProduct(productId);// 加载完成后更新标题uni.setNavigationBarTitle({title:product.name,});// 根据商品状态改变导航栏颜色if(product.status==="onsale"){uni.setNavigationBarColor({frontColor:"#ffffff",backgroundColor:"#4CD964",// 绿色表示在售});}else{uni.setNavigationBarColor({frontColor:"#000000",backgroundColor:"#FF9500",// 橙色表示缺货});}}catch(error){uni.setNavigationBarTitle({title:"加载失败"});uni.showToast({title:"获取商品信息失败",icon:"none"});}finally{uni.hideNavigationBarLoading();}},},};