ionic3在ios上顶部导航栏显示不正常--据顶部有空隙条

最新推荐文章于 2022-12-07 11:05:03 发布
最新推荐文章于 2022-12-07 11:05:03 发布
阅读量2.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ionic3 文章标签： ionic3 ios顶部导航显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zuoyiran520081/article/details/78751519
本文介绍了一个关于iOS设备上出现的顶部导航栏显示异常的问题及其解决方案。该问题仅出现在iOS真机或模拟器上，通过在页面的<ion-content>标签之上添加<ion-header></ion-header>空标签得以解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在项目中遇到这样的问题：
如图：
这里写图片描述
顶部导航平白多了一道白条，而且这个只是在ios的真机或者是模拟器上才显示，用chrome和android真机是一点问题没有，于是就重新下载了一个tabs项目，运行，也没有问题，一点点儿找原因才发现是因为觉得不需要顶部导航，就给去掉了，于是，解决的办法是：
在页面的

<ion-content>内容</ion-content>

之上，加上

<ion-header></ion-header>

空标签即可正常显示为：
这里写图片描述

解决 iOS 11 webview 顶部空白条的问题
十年磨一剑，霜刃未曾试!
12-31 3196
在 iOS 11 使用 webview 发现顶部会有一个空白条，怎么也去不掉，通过设置 contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever 就可以解决了，具体的代码如下： // // ViewController.m // webView // // Created by exchen on 1...
iOS：UIScrollView、UITableView、UICollectionView顶部空白问题
韩博主
07-02 829
UIScrollView、UITableView、UICollectionView顶部空白问题解决：配置下面代码即可解决。 if (@available(iOS 11.0,*)) { self.collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever; self.scrollView.contentInsetAdjustmentBehavior = UISc
ionic ios状态栏顶部间隙（白条）Android状态栏全黑
weixin_39165470的博客
11-25 662
ionic1项目，运行到ios13以上出现的。首先先上图，确认下是否一致。 呐，就是这么个情况，百度了好多，真滴是花费一个下午没有结局，废话不多说，上解决方式。 1、打开ionic项目；插入cordova-plugin-ionic-webview插件； 2、找到index.html文件，在<meta name="viewport" content="xxxxxxxx">的co...
iOS导航栏隐藏返回时顶部空白
Rex
04-20 1516
iOS导航栏隐藏返回时顶部空白http://blog.youkuaiyun.com/cloud_pro/article/details/51967418 转载链接 (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; // 隐藏导航栏 [self.navigationController setNavigation
解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
热门推荐
qq_35536883的博客
09-26 1万+
新版微信在苹果iOS 端的h5页面如果有路由跳转，会出现底部白色导航条。会占用页面的高度，如何去解决这个问题呢。 方案一 页面跳转时重新定页面的高度，这样处理导航条仍然存在。 方案二 使用history.replace代替history.push。 由于底部导航栏是因为出现history记录才出现的。使用replace就没有history记录，所以就可以完美隐藏导航栏了！ ...
ionic App 解决android端在真机上tab处于顶部的问题
08-30
Ionic App 解决 Android 端在真机上 Tab 处于顶部的问题 Ionic App 在 Android 端真机上 Tab 处于顶部的问题是很多开发者经常遇到的问题。本文将为大家介绍解决这个问题的方法，涉及到 Ionic Config Provider 的...
Ionic3-D3-Chart:Ionic3 D3.js
05-15
【标题】"Ionic3-D3-Chart：使用D3.js在Ionic3框架中的图表应用" 【描述】"这个项目展示了如何在Ionic3框架内集成D3.js库来创建动态、交互式的图表。它是一个Android APK应用程序，允许用户在移动设备上体验基于D3...
ionic5-wordpress-app：Ionic 5 Wordpress应用（iOS和Android）
02-05
Ionic 5 Wordpress应用程式（iOS和Android） 使用Ionic v5的简单应用程序构建。 该应用程序显示最新帖子。 类别和按类别浏览帖子 搜索所有帖子 分页 npm start尝试 在src/app/services/wordpress.service.ts更改...
ionic-push-base：适用于iOS和Android的Ionic Push Notifications Base App
01-30
可以用作Ionic Push应用程序的基本模板。 它适用于iOS和Android推送通知。 讲解 先决条件 从下载nodejs，它将安装node和npm node -v - should be > = 6.0.0 npm -v - should be > = 3.0.0 对于iOS，将XCode版本...
ionic-header-parallax:此指令启用对“离子标题”元素的视差效果，以在页面顶部显示封面照片，并在向下滚动内容时将其转换为普通导航栏
05-17
此指令启用对ion-header元素的视差效果，以在页面顶部显示封面照片，并在向下滚动内容时将其转换为普通导航栏。 对于Ionic 3，请使用此软件包的版： $ npm i ionic-header-parallax@1.1.0 。 设置 安装软件包： $ ...
iOS 修改顶部状态栏显示为白色
IOS_ZhuJianan的博客
12-15 1411
1在Info.plist中设置UIViewControllerBasedStatusBarAppearance 为NO 2 在需要改变状态栏颜色的ViewController中在ViewDidLoad方法中增加： [UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];如果需要在全部Vie
苹果手机ios端，页面向上溢出屏幕，导致顶部导航栏未显示
weixin_49577940的博客
12-07 1091
苹果手机ios端，页面向上溢出屏幕，导致顶部导航栏未显示
iOS11适配tableView顶部空白
weixin_30780221的博客
02-02 136
如果你使用了MJRefresh进行刷新，并且你隐藏了导航栏，就会出现下拉刷新错乱的问题。 因为iOS 11上废除了automaticallyAdjustsScrollViewInsets这个方法，使用UIScrollView's contentInsetAdjustmentBehavior来代替，解决办法就是一段代码： OC: if (@available(iOS 11.0, ...
iOS-80-解决主页tableview顶部多出一块
IOT_LI的专栏
09-06 1526
如果主页用tableview，切换时，可能顶部会多出一块儿，特别是增加下拉刷新，这种情况更明显。 解决办法： 在每次展示页面时，都判断一下tableview顶部位置，重置为0位置即可： - (void)viewWillAppear:(BOOL)animated {     [super viewWillAppear:animated];
OC iPhoneX UIScrollView顶部有空白问题
klkxxy的博客
08-16 809
自己看的
适配IOS 15 系统导航栏状态栏白条问题
Jing921225的博客
12-20 2719
手机更新IOS 15之后发现我们的APP的头部导航栏忽然多出来一行白条如下图所示。 这是什么所导致的呢？ scrollEdgeAppearance 属性 iOS15 强制适用于所有导航器 导航控制器包含导航栏和滚动视图，滚动视图的部分内容将显示在导航栏下方。当滚动内容的边缘到达该栏，UIKit将在此属性中应用外观设置。此属性的值为nil的时候，UIKit将使用standardAppearance属性中的设置，并修改为使用透明背景。当没有导航控制器管理导航栏时，UIKit将忽略此属性，并使用导航栏的标准
ionic开发中设置列表ion-list和边界的距离
JR的博客
05-24 5064
初学html5&ionic，很多地方还不是很懂，记录学习过程中遇到的小错误。 我写了一个列表ion-list，但是ion-list和边界总是有一定距离，如图： 解决办法： ion-content后有一个属性padding，若将该属性设置为true，则会出现上述效果，不设置或设置为false，则list距离边界为零。如下图：
ionic在Android下状态栏显示异常问题
weixin_41811536的博客
04-09 306
ionic打包Android .apk后，手机安装运行发现状态栏黑漆漆一片，时间、手机信号等信息都不见了。 解决办法就是降低statusBar版本，找到项目根目录下config.xml,翻到最下面可以看到cordova-plugin-statusbar的版本，我们需要把版本降低到2.2.1。 运行命令： ionic cordova plugin remove cordova-plugin-statusbar ionic cordova plugin add cordova-plugin-statusbar@
ios11 statusbar（状态栏隐藏问题）
VTeGong的博客
10-23 9715
升级到ios11状态栏默认为白色，比较难看所以采用 cordova-plugin-disable-ios11-statusbar 插件隐藏， 隐藏后出现20px间隙导致页面闪动，如图 1-1。 解决方案： 安装 cordova-plugin-ionic-webview 插件，安装前请认真阅读插件文档。 图1-1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值