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

 

posted @   三线码工  阅读(5661)  评论(0编辑  收藏  举报
编辑推荐:
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· Windows 提权-UAC 绕过
点击右上角即可分享
微信分享提示