配置uni-app导航栏上按钮

Posted on   猫头唔食鱼  阅读(12908)  评论(2编辑  收藏  举报

查看uni-app官网,buttons配置即可

例子:

复制代码
{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "app-plus": {
                    "titleNView": {
                        "searchInput": {
                            "align": "center",
                            "backgroundColor": "#eee",
                            "borderRadius": "5px", // 只能用px作单位
                            "placeholder": "请输入内容",
                            "placeholderColor": "#ccc"
                        },
                        "buttons": [{
                            "color": "#F0AD4E",
                            "colorPressed": "#eee",
                            "float": "left",
                            "fontSize": "22px",
                            "fontSrc": "/static/iconfont.ttf", // 字体文件
                            "text": "\ue65d" // 字体图标\u 开头,加上字体图标unicode后面四位
                        },
                        {
                             "color": "#333",
                             "colorPressed": "#eee",
                             "float": "right",
                             "fontSize": "22px",
                             "fontSrc": "/static/iconfont.ttf", // 字体文件
                             "text": "\ue678" // 字体图标\u 开头,加上字体图标unicode后面四位
                        }
                        ]
                    }
                }
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}
复制代码

效果:

 

编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示