ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)

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

• 1.使用ion-slide实现首页幻灯片；
• 2.使用ion-grid实现商品分类；
• 3.使用ion-list实现商品列表；

说一下实现思路

• 1.先获取网络请求的数据，查看数据结构；
• 2.根据数据结构来判断需要展示的数据，编写html；
• 3.调整界面样式，编写scss；

准备工作

开始之前请到阿里开源图标库准备首页需要的小图标，不想自己找的同学，在文章最后的交流群的群文件里有导出好的资源小图标，下载后直接放到项目的src/assets/icon/目录中即可。
并在index.html的header节点中导入资源图标库；

index.html

  <link href="assets/icon/iconfont.css" rel="stylesheet">

详细代码如下：

home.ts

import { AppService, AppGlobal } from './../../app/app.service';
import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  slides: Array<any> = [];
  categories: Array<any> = [];
  products: Array<any> = [];

  spinner1: boolean = true;

  params = {
    favoritesId: 2054400,
    pageNo: 1,
    pageSize: 20
  }

  constructor(public appService: AppService, public navCtrl: NavController) {
    this.getSlides();
    this.getCategories();
    this.getProducts();
  }
  //获取幻灯片
  getSlides() {
    var params = {
      favoritesId: 2056439,
      pageNo: 1,
      pageSize: 5
    }
    this.appService.httpGet(AppGlobal.API.getProducts, params, rs => {
      console.debug(rs);
      this.slides = rs.data;
      this.spinner1 = false;
    })
  }
  //获取分类
  getCategories() {
    this.appService.httpGet(AppGlobal.API.getCategories, { appTag: 'dress' }, rs => {
      console.debug(rs);
      this.categories = rs.data;
    })
  }
  //获取首页推荐列表
  getProducts() {
    this.appService.httpGet(AppGlobal.API.getProducts, this.params, rs => {
      console.debug(rs);
      this.products = rs.data;
    })
  }
  //商品详情
  goDetails(item) {
    console.debug('go details...')
  }
}

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 src="{{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 src="{{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中如何设计透明导航栏。

完！