这一讲主要包含以下几个部分：
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
怎么样，复杂的列表页就这样简单的实现了。
看到到这里，相信大家对封装的思想应该有自己的认识了。
下一讲讲解如何设计商品详情页。
完！
作者：IonicBlog
链接：https://www.jianshu.com/p/59b0b3fbf14e
随时随地看视频
