uni-app 原生导航栏相关设置
原生导航设置buttons时候监听点击事件
{ "path": "pages/user/uses", "style": { "app-plus": { "bounce": "none", "titleNView": { "buttons": [ {"text": "分享"}, {"text": "分享22"}, {"text": "分享233"} ], "backButton": { "background": "#00FF00" } } } } }, 监听 import { onReady } from '@dcloudio/uni-app' onNavigationBarButtonTap( (e) => { console.log (1111111) console.log (e) })
// 透明渐变导航栏 "style": { "navigationBarTitleText": "透明渐变导航栏", "transparentTitle": "auto" } 或者 "app-plus": { "titleNView": { "type": "transparent" } } // 中间图片导航栏 "style": { "navigationBarBackgroundColor": "#FFFFFF", "navigationBarTextStyle": "black", "titleImage": "https://web-assets.dcloud.net.cn/unidoc/zh/logo1@2x.png" } // 导航栏带红点和角标 "app-plus": { "titleNView": { "buttons": [{ "text": "消息", "fontSize": "14", "redDot": true }, { "text": "关注", "fontSize": "14", "badgeText": "12" } ] } } // 导航栏带搜索框 "app-plus": { "titleNView": { "type": "transparent", "titleColor": "#fff", "backgroundColor": "#007AFF", "buttons": [{ "fontSrc": "/static/uni.ttf", "text": "\ue537", "width": "40px", "fontSize": "28px", "color": "#fff", "background": "rgba(0,0,0,0)" }], "searchInput": { "backgroundColor": "#fff", "borderRadius": "6px", "placeholder": "请输入地址 如:大钟寺", "disabled": true } } // 导航栏带城市选择 "app-plus": { "titleNView": { "buttons": [{ "text": "北京市", "fontSize": "14", "select": true, "width": "auto" }] } }
原生导航栏设置
uni.setNavigationBarTitle({ title: '请设置支付密码' }) uni.setNavigationBarColor({ frontColor: '#000000', // 前景颜色值,仅支持 #ffffff 和 #000000 backgroundColor: '#eebf94', // 背景颜色值 success: function() { console.log('状态栏颜色已更改!'); }, fail: function(err) { console.error('更改状态栏颜色失败:', err); } }); 还可以 "style": { "navigationBarTitleText": "2222", "app-plus": { "bounce": "none", "titleNView": { "titleColor": "#f02656", "buttons": [ {"text": "分享", "fontSize": "20rpx"} ], "backButton": { "background": "#00FF00" } } }
分类:
uniapp
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
2020-09-22 node 启动命令