uniapp 导航栏设置文字图片
{ //收藏 "path": "pages/collect", "style": { "navigationBarTitleText":"收藏", "app-plus": { "titleNView": { "titleSize": "36rpx", "buttons": [ { "float": "right", "fontSize": "30rpx", "text": "编辑", "width":"120rpx" }, { "float": "right", "fontSize": "30rpx", "text": "搜索" } ] } } } },
或者内置图标内容
"titleNView":{ "buttons":[ { "type":"menu" } ] }
- "forward":前进按钮
- "back":后退按钮
- "share":分享按钮
- "favorite":收藏按钮
- "home":主页按钮
- "menu":菜单按钮
- "close":关闭按钮
- "none":无样式,不显示图标
更多内容
https://ext.dcloud.net.cn/plugin?id=1765
uniapp导航栏自定义按钮及点击事件
可以在onReady内执行,以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间
uni.setNavigationBarTitle({ title: '新的标题' }); uni.setNavigationBarColor({ frontColor: '#000000', //前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000 backgroundColor: '#F0AD4E', //背景颜色值,有效值为十六进制颜色 animation: { //动画效果 duration: 400, timingFunc: 'easeIn' } })
export default { data() { return { sign:0, aa:"wosbt" } }, onReady() { uni.setNavigationBarTitle({ title: this.aa }) }, onNavigationBarButtonTap(e) { console.log(this.aa) }, onLoad(option) { // uni.setNavigationBarTitle({ // title: option.title // }) this.aa="66666" }, methods: { } }
会显示66666,点击图标会打印6666
本文来自博客园,作者:三线码工,转载请注明原文链接:https://www.cnblogs.com/shangrao/p/14170329.html