這一講主要包含以下幾個(gè)部分：

• 1.創(chuàng)建商品詳情頁
• 2.獲取商品詳情頁的數(shù)據(jù)
• 3.展示商品詳情頁的數(shù)據(jù)

1.創(chuàng)建商品詳情頁

執(zhí)行 ionic g page product-details

8-1.png

實(shí)現(xiàn)點(diǎn)擊商品列表項(xiàng)時(shí)跳轉(zhuǎn)到商品詳情頁：

在ion-products.html中增加(click)="goDetails(p)"事件扫尖，實(shí)現(xiàn)跳轉(zhuǎn)：
在ion-products.ts增加goDetails()函數(shù)汗唱，

  goDetails(item) {
    this.navCtrl.push('ProductDetailsPage', { item: item });
  }

2.獲取商品詳情頁的數(shù)據(jù)

這里只需要展示商品標(biāo)題、價(jià)格狞换、介紹达罗、和圖片低斋；

product-details.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-product-details',
  templateUrl: 'product-details.html',
})
export class ProductDetailsPage {
  selectedItem: any;
  imgs: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.selectedItem = this.navParams.get("item");
      if (this.selectedItem.SmallImages) {
          this.imgs = this.selectedItem.SmallImages;
      }
  }
}

3.展示商品詳情

product-details.html

<ion-header>
  <ion-navbar style="opacity: 0.8" no-border-bottom color="primary">
    <ion-title>商品詳情</ion-title>
  </ion-navbar>
</ion-header>
<ion-content fullscreen>
  <ion-row>
    <ion-col>
     < img src="{{selectedItem.PictUrl}}" alt="">
    </ion-col>
  </ion-row>
  <div class="item-good">
    <div class="list-price buy">
      <span class="price-new ml"><i>￥</i>{{selectedItem.ZkFinalPrice}}</span>
      <i class="del f14 ml2">￥{{selectedItem.ReservePrice}}</i>
    </div>
    <h1>{{selectedItem.Title}}</h1>
  </div>
  <button ion-button full primary ?>去搶購</button>
  <div *ngFor="let img of imgs">
    < img src="{{img}}" alt="">
  </div>
</ion-content>

product-details.scss

page-product-details {
  ion-col {
    padding: 0px;
  }
  .item-good .list-price {
    width: 96%;
    height: 34px;
    line-height: 35px;
    bottom: 0;
    padding: 2% 0;
  }
  .list-price .ml {
    color: #f8285c;
    margin-left: 27%;
  }
  .item-good h1 {
    width: 96%;
    font-size: 16px;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    padding: 2%;
    text-align: center;
  }
  .item-good .list-price .f14 {
    font-size: 14px;
  }
  .item-good .list-price i {
    font-style: normal;
    font-size: 30px;
  }
  .item-good .price-new {
    font-size: 30px;
  }
  .list-price .ml2 {
    margin-left: 2%;
  }
  .item-good .del {
    color: rgba(171, 171, 171, 1);
    text-decoration: line-through;
  }
}

到這里商品詳情頁就完成了，試試看首頁的商品列表愉择，和分類的商品列表骄崩，點(diǎn)擊都可以跳轉(zhuǎn)到詳情的界面，是不是再一次感受到封裝帶來的便捷薄辅。

看下效果

8-2.gif

下一講講將介紹如何使用應(yīng)用內(nèi)主題瀏覽器要拂，官方資料：http://ionicframework.com/docs/native/themeable-browser/

完！