ionic4 标题栏 ion-toolbar 默认 底部会显示一个底边框 解决

在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. In ios 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测试得到的结论,真机上还有待测试。

喜欢的话,请点赞,转发、收藏、评论,谢谢!
原文地址:https://www.cnblogs.com/johnjackson/p/12256720.html