ionic3固定首页内容有阴影线问题

最新推荐文章于 2019-11-14 18:01:57 发布

chelen_jak

最新推荐文章于 2019-11-14 18:01:57 发布

阅读量372

点赞数

分类专栏： Ionic3 实用

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

本文介绍了一种在Ionic移动应用开发中去除Header阴影的方法，通过调整CSS样式，可以有效解决阴影影响界面美观的问题。

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

原文出处：https://blog.youkuaiyun.com/cangahi09025566/article/details/81027424

在ionic移动开发中,往往需要固定首页,不让其随着列表一起滑动.虽然可以固定但是会出现一条明显的阴影线.这很影响界面美观

如图红色线框圈住部分:

这个要去掉很简单,只需要在它的css样式里面添加如下代码:

.header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {
  left: 0;
  bottom: -5px;
  background-position: left 0 top -2px;
  width: 100%;
  height: 5px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMV…h/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
  background-repeat: repeat-x;
  content: "";
}

加上该样式之后效果如下：

是不是好看多了呢,这样我们就把这个难看的阴影给去掉啦！

【补充：《ionic angjs2 ion-header 阴影bug》做法更简单】
网址：https://segmentfault.com/q/1010000011767307
提问：

在转场动画没有完全结束前依然存在阴影求解

新创建的项目没改动也这样

回答：
ionic的header有个after的伪类，把其中background设为none即可去掉阴影。

即在CSS加上：

    /*去掉ion-header下面的阴影*/
    .header-md::after, .tabs-md[tabsPlacement="top"] > .tabbar::after, .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before {
        background-image: none;
    }

比上面的代码更精简，不用维护其他的选项；