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

港控/mmm° 2022-04-05 08:26 146阅读 0赞

原文出处：[https://blog.csdn.net/cangahi09025566/article/details/81027424][https_blog.csdn.net_cangahi09025566_article_details_81027424]

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

如图红色线框圈住部分:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

这个要去掉很简单,只需要在它的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: "";
    }

加上该样式之后效果如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 2][]

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

新创建的项目没改动也这样  
  
回答：  
ionic的header有个after的伪类，把其中background设为none即可去掉阴影。  
![20181211174754224.png][]

即在CSS加上：

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

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

[https_blog.csdn.net_cangahi09025566_article_details_81027424]: https://blog.csdn.net/cangahi09025566/article/details/81027424
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: /images/20220405/6e5a7c7bc173472189f9fc9ed7cb52c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1]: /images/20220405/aa583530af6e413f83cd320d1ea12386.png
[https_segmentfault.com_q_1010000011767307]: https://segmentfault.com/q/1010000011767307
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 2]: /images/20220405/da94768816aa4175bf4a8386a03eabdf.png
[20181211174754224.png]: /images/20220405/5beb96a006aa408a8786d4aa69ac8192.png