商城首页主要包含以下几个部分

• 1.使用ion-slide实现首页幻灯片；

• 2.使用ion-grid实现商品分类；

• 3.使用ion-list实现商品列表；

说一下实现思路

• 1.先获取网络请求的数据，查看数据结构；

• 2.根据数据结构来判断需要展示的数据，编写html；

• 3.调整界面样式，编写scss；

准备工作

开始之前请到

home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>首页</ion-title>
  </ion-navbar></ion-header><ion-content>

  <ion-row *ngIf="spinner1">
    <ion-col text-center>
      <ion-spinner></ion-spinner>
    </ion-col>
  </ion-row>

  <ion-slides>
    <ion-slide *ngFor="let item of slides" (click)="goDetails(item)">
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{item.PictUrl}}" alt="">
      <div class="cover"></div>
      <span class="title">{{item.Title}}</span>
    </ion-slide>
  </ion-slides>


  <div class="categories">
    <ion-grid>
      <ion-row wrap>
        <ion-col text-center tappable col-3 *ngFor="let c of categories" (click)="goProductList(c)">
          <i class="iconfont {{c.Icon}} icon"></i>
          <span class="title">{{c.FavoritesTitle}}</span>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <ion-item-divider class="t-header" color="light"> 年会礼服2017年新款 </ion-item-divider>
  <div class="product">
    <ion-row wrap>
      <ion-col tappable col-6 *ngFor="let p of products" (click)="goDetails(p)">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{p.PictUrl}}" alt=""/>
        <p>{{p.Title}}</p>
        <div class="list-price buy">
          <span class="price-new"><i>￥</i>{{p.ZkFinalPrice}}</span>
          <i class="del">￥<span>{{p.ReservePrice}}</span></i>
        </div>
      </ion-col>
    </ion-row>
  </div></ion-content>

html.scss

page-home {
  ion-slides {    height: 30%;    .cover {      position: absolute;      bottom: 0px;      width: 100%;      height: 20px;      background: linear-gradient(to right, #673743, #f9537d);      opacity: 0.6;
    }    .title {      position: absolute;      bottom: 0px;      width: 90%;      height: 20px;      line-height: 20px;      font-size: 60%;      left: 5px;      text-align: center;      color: white;
    }
  }  .categories {    .title {      font-family: "黑体-简";      font-weight: 300;      color: #808080;      font-size: 80%;      display: block;      margin-top: 5px;
    }
    ion-row {      background-color: #efefef;      padding: 0px;
    }
    ion-col {      background-color: white;      /*border: 1px solid #efefef;*/
    }
  }  .icon {    border-radius: 100px;    color: white;    background-color: #f8285c;    font-size: 36px !important;    padding: 5px;
  }  .c1 {    background-color: orangered;
  }  .c2 {    background-color: blueviolet;
  }  .c3 {    background-color: sandybrown;
  }  .c4 {    background-color: slateblue;
  }  .c5 {    background-color: orange;
  }  .c6 {    background-color: dimgray;
  }  .t-header {    font-family: "黑体-简";    font-weight: 300;    color: #f8285c;    border-left: 2px solid #f8285c;    border-top: 5px solid #efefef;    background: white;
  }  .stores {    .title {      font-family: "黑体-简";      font-weight: 300;      color: #808080;      font-size: 80%;      display: block;      margin-top: 5px;
    }
    ion-row {      background-color: #efefef;      padding: 0px;
    }
    ion-col {      background-color: white;      border: 1px solid #efefef;
    }
  }  .product {
    ion-row {      background-color: #efefef;      font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;      padding-top: 3px;
      ion-col {        position: relative;        background-color: white;        border: 2px solid #efefef;        border-radius: 2px;        padding: 0px;        p {          margin: 0px;          padding: 0px;          width: 100%;          font-size: 12px;          font-family: "黑体-简";          font-weight: 300;          color: #808080;          height: 26px;          line-height: 26px;          background: rgba(255, 255, 255, 0.8);          overflow: hidden;          text-indent: 5px;
        }
      }
    }    .list-price {      width: 98%;      height: 26px;      line-height: 18px;      position: relative;      bottom: 0;      margin: 0 2%;
    }    .price-new {      font-size: 18px;      color: #f8285c;
    }    .list-price i {      font-style: normal;      font-size: 12px;
    }    .del {      color: rgba(171, 171, 171, 1);      text-decoration: line-through;      margin-left: 2px;
    }    .good-btn {      display: block;      position: absolute;      height: 16px;      line-height: 12px;      color: #f8285c;      font-size: 13px;      font-family: "黑体-简";      text-align: right;      top: 5px;      right: 2px;
    }    .quan_img {      position: absolute;      width: 61px;      height: 55px;      z-index: 5;      right: 0;      top: 0;      cursor: pointer;      background: url(/assets/img/quan.png) no-repeat;      background-size: contain;      color: #fff;
    }    .quan_img .num_money {      font-family: Arial;      font-size: 18px;      height: 40px;      left: 9px;      position: absolute;      text-align: center;      top: 14px;      width: 40px;
    }
  }
}

效果图

4-1.png

下一讲将讲解�在ionic3中如何设计透明导航栏。

完！

作者：IonicBlog
链接：https://www.jianshu.com/p/2746ece3aa0d