首页 > 技术文章 > uniapp 导航栏设置文字图片

shangrao 2020-12-21 21:57 原文

{
    //收藏
    "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

 

推荐阅读