ionic3 简易公告栏的制作

在制作app的过程中，很容易遇到一种作为分割的公告栏，一栏用作导航，指引该处可以跳转至某一位置，中间栏部分用于显示正文主题内容，这种效果有两种表现形式，具体如下：

上面的一栏是头部作为导航栏，指引可以跳转的位置，下面一个是尾部作为导航栏，指引跳转的位置，具体实现代码如下：

html部分

<!--头部分割-->
<div class="list-nav no-footer">
  <div class="list-nav-header">
    <div class="list-nav-header-left">我的关注</div>
    <div class="list-nav-header-right">更多
      <ion-icon name="ios-arrow-forward"></ion-icon>
    </div>
  </div>
  <div class="list-nav-body">
    <div class="list-nav-body-item">
      <div class="list-body-item">
        <p style="color: #1a8bd4;">最新赛事</p>
      </div>
      <div class="list-body-content">
        最新一期的比赛将于2019-03-11开始进行届时，
        将会邀请很多评委来参加本次的比赛为庆祝这次比赛，
        赛方举办了很多活动
      </div>
      <img src="../../assets/imgs/head-bg4.jpg">
    </div>
  </div>
</div>


<!--尾部分割-->

<div class="list-nav has-footer">
  <div class="list-nav-body">
    <div class="list-nav-body-item">
      <div class="list-body-item">
        <p style="color: #1a8bd4;">最新消息</p>
      </div>
      <div class="list-body-content">
        最新一期的比赛将于2019-03-11开始进行届时，
        将会邀请很多评委来参加本次的比赛为庆祝这次比赛，
        赛方举办了很多活动
      </div>
      <img src="../../assets/imgs/head-bg0.jpg">
    </div>
  </div>
  <div class="list-nav-footer">
    <div class="list-nav-footer-left">更多精彩</div>
    <div class="list-nav-footer-right">
      <ion-icon name="ios-arrow-forward"></ion-icon>
    </div>
  </div>
</div>

scss部分

page-nav-list {
  $height:18%;  //list首尾的高度固定
  $borderColor:#f5f5f5; //边框分界色
  $navhedercolor:red;  // 头部导航引导色
  $width:100%;
  $chaWidth:1%;
  background: #f8f8f8;
  //消除文字锯齿现象
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
  .list-nav {
    clear: both;
    width: 100%;
    height: auto;
    background: white;
    margin-top: 10px;
    border: 1px solid #f8f8f8;
    //身体公共部分
    .list-nav-body {
      clear: both;
      width: $width;
      height: auto;
      .list-nav-body-item {
        clear: both;
        width: 100%;
        height: 60px;
        border-bottom:1px solid $borderColor;
        &:last-child{
          border-right: none;
          border-bottom:none;
        }
        & img{
          width: 20%;
          height: 50px;
          float: right;
          vertical-align: middle;
          margin-top: 5px;
          margin-right: 2px;
        }
        & .list-body-item {
          float: left;
          width: 20%;
          text-align: center;
          //消除文字锯齿现象
          -webkit-font-smoothing:antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        & .list-body-content {
          float: left;
          padding:5px;
          width: 59%;
          height: 46px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          font-size: 12px;
          color: #666666;
        }
      }
    }
    //头部引导栏
    &.no-footer{
      .list-nav-header {
        width: $width;
        height: 30px;
        line-height: 28px;
        border-bottom: 1px solid $borderColor;
        //border-left: 2px solid $navhedercolor;
        .list-nav-header-left {
          display: inline-block;
          padding-left: 1%;
          color: #000;
          font-weight: bolder;
          &:before {
            content: '';
            border:2px solid $navhedercolor;
            margin-right: 5px;
            background: $navhedercolor;
            font-weight: bolder;
          }
        }
        .list-nav-header-right {
          display: inline-block;
          float: right;
          padding-right: 3%;
          color: #666666;
          font-size: 10px;
          ion-icon {
            font-size: 12px;
            margin-left: 2px;
            vertical-align: center;
          }
        }
      }
    }
    //尾部引导栏
    &.has-footer{
      margin-top: 10px;
      //@extend .no-footer;
      .list-nav-footer{
        width: $width;
        border-top: 1px solid $borderColor;
        & div{
          display: inline-block;
          line-height: 28px;
        }
        .list-nav-footer-left {
          padding-left: 3px;
          font-size: 14px;
          color: #333333;
        }
        .list-nav-footer-right {
          float: right;
          padding-right: 8px;
          font-size: 10px;
          color: #666666;
        }
      }
    }
  }

}

这里面遇到的问题有文字的锯齿效果消除，垂直居中的问题、还有文字溢出换行的方法；

（1）消除文字锯齿效果的代码：

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing: grayscale;

（2）垂直居中问题：本文结合的是实际的高度比例出发，根据尺寸来设置具体垂直居中的位置；

（3）文字溢出的处理方法

         单行文本文字溢出：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

        多行文本文字溢出：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

     对-webkit-box的理解参考：https://www.cnblogs.com/frankwong/p/4603141.html