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
分类:
uniapp
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· Windows 提权-UAC 绕过