麻花痒 发表于 2025-1-25 22:30:10

【Uniapp-Vue3】动态设置页面导航条的样式

1. 动态修改导航条标题

   uni.setNavigationBarTitle({   
        title:"标题名称"
})
https://i-blog.csdnimg.cn/direct/7f2892078b6a4a32927fc926b92230e1.png
点击修改以后顶部导航栏的标题会从“主页”变为“动态标题” 
https://i-blog.csdnimg.cn/direct/e98bcf13d5a641868eee304d15368c48.png
2. 动态修改导航条颜色

   uni.setNavigationBarColor({   
        backgroundColor:"颜色"
})
https://i-blog.csdnimg.cn/direct/13001867c7b1416b8e9c20b2306c8733.png
https://i-blog.csdnimg.cn/direct/27236546c3234f99b84f6607187df47f.png
3. 动态添加导航加载动画

   // 添加加载动画
uni.showNavigationBarLoading();
// 取消加载动画
uni.hideNavigationBarLoading();
https://i-blog.csdnimg.cn/direct/78e67edf81494493ae016f65f38d7ceb.png
https://i-blog.csdnimg.cn/direct/f26dbeb893f441d8b7719d05f2d3d27f.png
4. 导航栏关闭首页按钮 

在微信小程序中如果编译非首页页面左上角就会出现返回首页的按钮(仅限微信小程序在开发模式下)
https://i-blog.csdnimg.cn/direct/f89d42261e594526a3a4f520de126fd1.png
使用如下设置关闭首页按钮:
   uni.hideHomeButton()
https://i-blog.csdnimg.cn/direct/8380cdd67c5745b89f64dfb29832e372.png
https://i-blog.csdnimg.cn/direct/e1992e5d23a64798b14118a7803e675e.png
这样我们就可以将多个子页面作为主页面

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 【Uniapp-Vue3】动态设置页面导航条的样式