在ionic的官方文档(https://ionicframework.com/docs/api/toolbar)中提到:
In
md
mode, the<ion-header>
will receive a box-shadow on the bottom, and the<ion-footer>
will receive a box-shadow on the top. Inios
mode, the<ion-header>
will receive a border on the bottom, and the<ion-footer>
will receive a border on the top.
大意就是在md模式下ion-header底边会显示一个阴影,ion-footer会在顶边显示一个阴影,在ios模式ion-header会显示一个底边,而ion-footer会显示一个顶边。
这段说明是在ion-toolbar组件中的,而内容说的就是ion-header,我不知道是不是官方的错误。
在chrome浏览器下测试,我是用的macbook,并且开发者工具中选的手机类型是iphone,所以<ion-toolbar> 默认被渲染为ios模式 。
但不管是ios,还是md模式,标题栏下边都会显示一个黑边。而且不管我怎么设--border-0 还是 border-style: none,都不能彻底去掉。
经过我不断的尝试,最后发现只要给ion-toolbar加上以下两个样式就可以去掉这个下边框:
--border- 0;
--min-height: 50px;
对于iphone X, --min-height: 设为 小于45 或大于45的偶数,都可以。
如果是要对全局进行设置,则修改 src/global.scss, 在其中加上
ion-toolbar { --min-height: 50px; --border-width: 0 !important; }
以上都是在PC端的Chrome测试得到的结论,真机上还有待测试。