h5页面自带导航栏情况下，在h5页面还没有加载出来之前，页面是空白的，这样很尴尬，用户体验非常差，如果加载非常慢或者加载失败的情况下，会一直处于空白页中，无法返回。
解决方案有：1.利用原生导航，2.h5添加预加载页面和错误页面，3自定义当航栏
经过尝试，我发现1，2两种方案都有一定的弊端，所以我选择了第三种方案自定义预加载当航栏。
首先自定义一个BaseWebController
.h
#import "BaseViewController.h"
NS_ASSUME_NONNULL_BEGIN
@interfaceBaseWebController :BaseViewController
//添加预加载导航栏
-(void)addPreloadPageNav;
//显示预加载导航栏
-(void)showPreloadPageNav;
//隐藏预加载导航栏
-(void)hidePreloadPageNav;
//移除预加载导航栏
-(void)removePreloadPageNav;
//预加载导航栏标题
-(void)preloadPageNavTitle:(NSString*)title;
//移除进度条
-(void)removeProgressView;
@end
NS_ASSUME_NONNULL_END
.m文件
@interface BaseWebController ()
//导航
@property (nonatomic,strong) UIView *preloadPageNav;
//标题
@property(nonatomic,strong)UILabel*preloadPageNavTitle;
//进度条
@property (nonatomic, strong) UIProgressView *progressView;
@property (nonatomic, strong) NSTimer *timer;
@end
@implementationBaseWebController
-(void)viewWillAppear:(BOOL)animated{
[self.navigationController setNavigationBarHidden:YES animated:NO];
[superviewWillAppear:animated];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController setNavigationBarHidden:NO animated:NO];
}
- (void)viewDidLoad {
[super viewDidLoad];
}
//添加预加载导航栏
-(void)addPreloadPageNav{
self.preloadPageNav=[UIView new];
[self.view addSubview:self.preloadPageNav];
[self.preloadPageNav mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.view);
make.size.mas_equalTo(CGSizeMake(kScreenWidth, 64));
}];
self.preloadPageNav.backgroundColor=[UIColor colorWithHexString:@"#ec403c"];
UIButton*navBackBtn=[UIButtonnew];
[self.preloadPageNavaddSubview:navBackBtn];
[navBackBtnmas_makeConstraints:^(MASConstraintMaker*make) {
make.centerY.mas_equalTo(self.preloadPageNav).offset(10);
make.left.mas_equalTo(self.preloadPageNav).mas_offset(20);
}];
[navBackBtnsetImage:[UIImage imageNamed:@"ic_back"] forState:UIControlStateNormal];
[navBackBtnaddTarget:self action:@selector(navBackBtnClick) forControlEvents:UIControlEventTouchUpInside];
navBackBtn.imageEdgeInsets=UIEdgeInsetsMake(0, -15,0,0);
navBackBtn.titleEdgeInsets=UIEdgeInsetsMake(0, -5,0,0);
[navBackBtnsetTitle:@"返回" forState:UIControlStateNormal];
navBackBtn.titleLabel.font= [UIFontsystemFontOfSize:16];
[navBackBtnsetTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self.preloadPageNavTitle=[UILabel new];
[self.preloadPageNav addSubview:self.preloadPageNavTitle];
[self.preloadPageNavTitle mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.preloadPageNav).offset(10);
make.centerX.mas_equalTo(self.preloadPageNav);
}];
self.preloadPageNavTitle.textColor=[UIColor whiteColor];
self.preloadPageNavTitle.font=[UIFont systemFontOfSize:17];
self.progressView = [UIProgressView new];
[self.preloadPageNav addSubview:self.progressView];
[self.progressView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.preloadPageNav.mas_bottom);
make.size.mas_equalTo(CGSizeMake(kScreenWidth, 2));
}];
self.progressView.progressTintColor=[UIColor blueColor];
self.progressView.trackTintColor=[UIColor clearColor];
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(progress) userInfo:nil repeats:true];
}
- (void)progress{
if (self.progressView.progress<0.5) {
self.progressView.progress+=0.2;
}else{
self.progressView.progress+=0.3;
}
if(self.progressView.progress==1) {
[self.timerinvalidate];
[self.progressView removeFromSuperview];
NSLog(@"accomplish");
}
}
-(void)removeProgressView{
[self.progressView removeFromSuperview];
}
//显示预加载导航栏
-(void)showPreloadPageNav{
if (self.preloadPageNav) {
self.preloadPageNav.hidden=NO;
}else{
[self addPreloadPageNav];
}
}
//隐藏预加载导航栏
-(void)hidePreloadPageNav{
if (self.preloadPageNav) {
self.preloadPageNav.hidden=YES;
}
}
//移除预加载导航栏
-(void)removePreloadPageNav{
if (self.preloadPageNav) {
[self.preloadPageNav removeFromSuperview];
}
}
//预加载导航栏标题
-(void)preloadPageNavTitle:(NSString*)title{
self.preloadPageNavTitle.text=title;
}
//返回按钮点击事件
-(void)navBackBtnClick{
[self.navigationController popViewControllerAnimated:YES];
}
@end
然后创建一个ViewController继承于上面的BaseWebController
- (void)viewDidLoad {
定义并创建webView；
[self addPreloadPageNav];//添加预加载导航栏
[self preloadPageNavTitle:@"标题"];//添加标题
}
- (void)webViewDidFinishLoad:(UIWebView*)webView{
[self hidePreloadPageNav];//h5页面加载完成方法里隐藏自定义导航
NSLog(@"地址：%@\n",[webView.request.URL absoluteString]);
}
#pragma mark -webview加载失败的回调
- (void)webView:(UIWebView*)webView didFailLoadWithError:(NSError*)error
{
[self showPreloadPageNav];//h5页面加载失败方法里展示自定义导航
}
网友评论