自 10.1.60 版本基线起,iOS 小程序支持对导航栏进行自定义,您可以对导航栏中的标题、背景、返回按钮、右侧的设置和关闭按钮进行自定义。本文将向您详细介绍关于自定义 iOS 小程序导航栏的方法。
如果您要全局自定义小程序所有页面默认导航栏背景和标题,则需要在 app.json
中修改 window 配置。
"transparentTitle": "always"
。"transparentTitle": "auto"
。"titleBarColor": "#f00"
。"defaultTitle": "Alert"
。导航栏标题颜色:在 H5 基类的 viewWillAppear
方法的 super
之中,修改当前页面 titleView
的样式。
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
...
BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
if (isTinyApp) {
id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
[[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
[[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}
}
导航栏标题图片:"titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"
。
导航栏标题位置:请参考以下代码进行实现。
- (NSDictionary *)nebulaCustomConfig
{
return @{@"h5_tinyAppTitleViewAlignLeftConfig" : @"{\"enable\":\"NO\"}"};
}
如果您要自定义小程序中某一页面的导航栏背景和标题,则需要在该页面的 .json
中配置。
"transparentTitle": "always"
。"transparentTitle": "auto"
。"titleBarColor": "#f00"
。"defaultTitle": "Alert"
。titleView
的样式。
- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
{
[super handler:data context:context callback:callback];
// 可以通过data传递字体、颜色等
id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
[[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
[[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}
"titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"
。如果您要动态修改当前页面的导航栏背景和标题,则需要调用 my.setNavigationBar
进行配置。
"backgroundColor": "#f00"
。"title": "新标题"
。导航栏标题颜色:您需要自定义 JSAPI,在 JSAPI 中修改当前页面 titleView
的样式。
- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
{
[super handler:data context:context callback:callback];
// 可以通过 data 传递字体、颜色等
id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
[[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
[[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}
导航栏标题图片:"image": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"
。
如果您要全局修改返回按钮样式,则需要在 H5 基类的 viewWillAppear
方法的 super
之中,修改当前页面 leftBarButtonItem
样式。可修改的样式包含以下内容,您可以参考下方代码段以获得更多指导。
隐藏返回文案
// 修改左侧返回按钮样式
AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
// 在默认返回按钮基础上,修改返回箭头和文案颜色
backItem.backButtonColor = [UIColor greenColor];
backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
// 修改返回箭头样式和文字内容
// backItem.backButtonTitle = @"回退";
// backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];
// 隐藏返回箭头
// backItem.hideBackButtonImage = YES;
// 隐藏返回文案:文案设置为透明,保留返回按钮的点击区域
// backItem.titleColor = [UIColor clearColor];
}
如果您要修改右侧按钮图片和颜色,则需要引入头文件 #import <TinyappService/TASUtils.h>
并进行如下配置。
[TASUtils sharedInstance].customItemColor = [UIColor redColor]
。[TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"]
。[TASUtils sharedInstance].shoulShowSettingMenu = YES
。[TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"]
。[TASUtils sharedInstance].customItemColor = [UIColor redColor]
。如果您要全局修改右侧按钮样式,则需要在 H5 基类的 viewwillAppear
中,重写当前页面的 rightBarButtonItem
。
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
...
BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
if (isTinyApp) {
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(onClickClose)];
}
}
- (void)onClickClose
{
[TASUtils exitTinyApplication:self.appId];
}
在文档使用中是否遇到以下问题
更多建议
匿名提交