美文网首页
uni-app 顶部标题栏定制按钮如何做?

uni-app 顶部标题栏定制按钮如何做?

作者: 秦语川 | 来源:发表于2020-10-02 18:58 被阅读0次
image.png

uni-app顶部栏我们用的最多最常见的就是标题啦,但是定制的项目很多顶部栏都会有一些快捷按钮,这样原生的标题栏功能就不够用了,但是我们又不想自己写一个怎么办??
如下懒人必备方法,推荐给大家:
首先page.json里面配置如下:

{
            "path" : "pages/user/account",
            "style" : {
                "navigationBarTitleText": "转账",
                "app-plus": {
                    "titleNView": {
                        "buttons": [{"text":"记录  ","fontSize":"16px"}]
                    }
                }
                
            }
        }

并且支持字体图标哦,字体图标版本如下:

{
            "path" : "pages/user/account",
            "style" : {
                "navigationBarTitleText": "转账",
                "app-plus": {
                    "titleNView": {
                        "buttons":[{"text":"\ue539","fontSrc":"/static/uni.ttf","fontSize":"22px"}] 
                    }
                }
                
            }
        }

之后结合下面提供的方法进行操作:

onNavigationBarButtonTap() {  
        console.log("点击了自定义按钮");  
    } 

不要问支持哪个平台,问就是:看文档去噻,app-plus的配置你会收获更多新大陆~,非常nice,加油!

相关文章

网友评论

      本文标题:uni-app 顶部标题栏定制按钮如何做?

      本文链接:https://www.haomeiwen.com/subject/oxabuktx.html