配置uni-app导航栏上按钮

查看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"
    }
}

效果:

原文地址:https://www.cnblogs.com/luguankun/p/11518231.html

时间: 2024-08-04 20:44:48

配置uni-app导航栏上按钮的相关文章

小程序配置单个页面导航栏的属性(微信小程序交流群:604788754)

配置单个页面导航栏的属性: 就在所要配置页面相对应的json文件中写入以下想要设置的属性: { "navigationBarBackgroundColor": "#ffffff",    "navigationBarTextStyle": "black",    "navigationBarTitleText": "小程序" } 属性只需要放在大括号里面即可,每个属性用逗号隔开. 如果不

UI: 使用 UIBarButtonItem 给导航栏添加按钮

问题: 希望将按钮添加到导航栏中 1.导航栏属于 UINavigationBar 类,你可以再任何时候创建它,并将它添加到任意的 view 中. 2.创建一个导航按钮,须要做一下工作: 创建一个 UIBarButtonItem 实例. 使用视图控制器的 navigationItem 属性将按钮添加到视图控制器的导航栏中,. NavigationItem 属性允许我们与导航栏进行交互.这个属性自身有两个属性,分别为 rightBarButtonItem 和 leftBarButtonItem.这两

小技巧 -- 隐藏导航栏返回按钮附带的文字

使用 [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -60) forBarMetrics:UIBarMetricsDefault]; 方法可以隐藏导航栏返回按钮上的文字.代码放的位置是每一个总的Controller的viewDidLoad方法下面.

解决 ios7.0 以后自定义导航栏左边按钮靠右的问题

解决 ios7.0 以后自定义导航栏左边按钮靠右的问题 www.111cn.net 编辑:edit02_lz 来源:转载 最近开发了一个ios的app,在ios7.0+出现自定义导航栏左边按钮出现靠右的情况,后来自己解决了,解决办法如下 1.自定义按钮  代码如下 复制代码 //左按钮UIButton *leftBtn = [[UIButton alloc]initWithFrame:RectWithPara(-20, 0, 44, 44)];[leftBtn addTarget:self ac

iOS开发项目篇—04添加导航栏的按钮

iOS开发项目篇—04添加导航栏的按钮 一.设置导航栏的按钮 要求实现的效果:             说明:默认状态下和高亮状态下的图片是不一样的. 按钮的图片需要设置默认状态和高亮状态时的显示,系统了提供的下面方法 viewController.navigationItem.leftBarButtonItem=[UIBarButtonItem alloc]initWithImage:<#(UIImage *)#> style:<#(UIBarButtonItemStyle)#>

iOS开发项目—04添加导航栏的按钮

iOS开发项目—04添加导航栏的按钮 一.设置导航栏的按钮 要求实现的效果:             说明:默认状态下和高亮状态下的图片是不一样的. 按钮的图片需要设置默认状态和高亮状态时的显示,系统了提供的下面方法 viewController.navigationItem.leftBarButtonItem=[UIBarButtonItem alloc]initWithImage:<#(UIImage *)#> style:<#(UIBarButtonItemStyle)#>

自定义导航栏标题按钮

自定义标题栏按钮 @implementation SNTitleButton - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { //图片居中 self.imageView.contentMode = UIViewContentModeCenter; //字体居右 self.titleLabel.textAlignment = NSTextAlignmentRight; //字体

iOS不得姐项目--appearance的妙用,再一次设置导航栏返回按钮,导航栏左右按钮的封装(巧用分类)

一.UI_APPEARANCE_SELECTOR 彩票项目中appearance的用法一直没有搞明白,这次通过第二个项目中老师的讲解,更深一层次的了解到了很多关于appearance的作用以及使用方法. 在iOS属性后有UI_APPEARANCE_SELECTOR标志都可以一次性统一设置.这种情况还有很多.比如说统一设置UITabbarItem的文字颜色 通过appearance来同意设置属性最好是在+ (void)initialize;方法里面. 项目中设置导航栏背景图片的代码: 项目中设置T

导航栏上添加searchBar

导航栏有个titleView的属性, @property(nonatomic,retain) UIView          *titleView; 因此可以写个类,继承自UIView,然后再view上添加需要的控件. 在写一句: self.navigationItem.titleView=search; 就可以达到在导航栏上添加searchBar了. 具体代码如下: 新建类:SearchBarView.m - (instancetype)initWithFrame:(CGRect)frame