ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现-阿里云开发者社区

开发者社区> 云计算> 正文

ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现

简介: 这一讲主要包含以下几个部分: 1.创建商品列表页 2.根据分类获取商品列表 2.展示商品列表 1.创建商品列表页 执行 ionic g page product-list 7-1.

这一讲主要包含以下几个部分:

  • 1.创建商品列表页
  • 2.根据分类获取商品列表
  • 2.展示商品列表

1.创建商品列表页

执行 ionic g page product-list

img_2b33d42df0b35f8f7b0964828fb2ef76.png
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>

好了,试试看效果。

img_1108e26221ea80cd7b5fa1fefce21a19.gif
7-2.gif

怎么样,复杂的列表页就这样简单的实现了。
看到到这里,相信大家对封装的思想应该有自己的认识了。

下一讲讲解如何设计商品详情页。

完!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章