這一講主要包含以下幾個部分:
- 1.創建商品列表頁
- 2.根據分類獲取商品列表
- 2.展示商品列表
1.創建商品列表頁
執行 ionic g page product-list
7-1.png
實現點擊首頁分類跳轉到該列表頁:
在home.html中增加click事件
<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>
在
home.ts
增加goProductList()
函數,
goProductList(item) {
this.navCtrl.push('ProductListPage', { item: item });
}
2.根據分類獲取商品列表
通過全局服務類獲取商品列表數據,同時實現了分頁加載,products-list.ts
完整代碼如下:
products-list.ts
import { AppService, AppGlobal } from './../../app/app.service';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-product-list',
templateUrl: 'product-list.html',
})
export class ProductListPage {
hasmore = true;
products: any;
selectedItem: any;
spinner1: boolean = true;
params = {
pageNo: 1,
favoritesId: 0,
}
constructor(public navCtrl: NavController, public navParams: NavParams, public appService: AppService) {
this.selectedItem = this.navParams.get("item");
this.params.favoritesId = this.selectedItem.FavoritesId;
}
ionViewDidLoad() {
this.getFavoritesItems();
console.log('ionViewDidLoad ProductListPage');
}
getFavoritesItems() {
this.appService.httpGet(AppGlobal.API.getProducts, this.params, d => {
this.products = d.data;
this.params.pageNo += 1;
this.spinner1 = false;
});
}
doInfinite(infiniteScroll) {
if (this.hasmore == false) {
infiniteScroll.complete();
return;
}
this.appService.httpGet(AppGlobal.API.getProducts,this.params, d => {
if (d.data.length > 0) {
this.products = this.products.concat(d.data);
this.params.pageNo += 1;
} else {
this.hasmore = false;
console.log("沒有數據啦!")
}
infiniteScroll.complete();
});
}
}
3.展示商品列表
還記得上一講中封裝的?商品列表組建ion-product
嗎?在這里就可以得到復用。在使用前同樣需要在product-list.module.ts
里進行導入。
product-list.module.ts
import { ComponentsModule } from './../../components/components.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProductListPage } from './product-list';
@NgModule({
declarations: [
ProductListPage,
],
imports: [
IonicPageModule.forChild(ProductListPage),ComponentsModule
],
})
export class ProductListPageModule {}
products-list.html的完整代碼
<ion-header>
<ion-navbar style="opacity: 0.8" no-border-bottom color="primary">
<ion-title>{{selectedItem.FavoritesTitle}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content fullscreen>
<ion-products [products]="products"></ion-products>
<ion-row>
<ion-col class="nodata" text-center *ngIf="!hasmore">
沒有商品啦 (^?^*)
</ion-col>
</ion-row>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
好了,試試看效果。
7-2.gif
怎么樣,復雜的列表頁就這樣簡單的實現了。
看到到這里,相信大家對封裝的思想應該有自己的認識了。
下一講講解如何設計商品詳情頁。
完!