ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)

注意，干货来了，相比前面几讲这一讲就要难以消化多了，请做好心理准备。

因为在这之前，经常看到有群友在求这种分类菜单的组建，今天我就为大家再造一个轮子 [微笑脸]。

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

• 1.效果图

• 2.布局思考

• 3.具体代码展示

1.效果图

10-1.png

2.布局思考

• 2.1.左右布局，考虑用ion-grid，一个ion-row，两个ion-col;

    <ion-grid>
      <ion-row>
         <ion-col>这里放菜单列表</ion-col>
         <ion-col>这里放商品列表</ion-col>
      </ion-row>
    </ion-grid>

• 2.2.分类和商品列表需要滚动

    <ion-grid>
      <ion-row>
         <ion-col><ion-scroll>这里放菜单列表</ion-scroll><ion-col>
         <ion-col><ion-scroll>这里放商品列表</ion-scroll><ion-col>
      </ion-row>
    </ion-grid>

• 2.3.左边菜单使用ion-list,右边商品列表使用我们之前封装的组建ion-products；

3.具体代码展示

这一讲的所有改动都在/src/pages/contact文件夹中，相信通过前面的几讲，大家对ionic3已经有了一个�初步的认识，那么读懂以下代码应该不是难事。

以下分别是 contact.module.ts ,contact.ts, contact.html , contact.scss 的完整代码：

这里用到了ion-products组建，需要在对应的module中导入依赖：

contact.module.ts

import { ComponentsModule } from './../../components/components.module';import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { ContactPage } from './contact';

@NgModule({    declarations: [
        ContactPage,
    ],    imports: [
        IonicPageModule.forChild(ContactPage),ComponentsModule
    ],
})export class ContactPageModule { }

难读懂的代码都添加了注释。

contact.ts

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

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

  @ViewChild('scroll') scrollElement: any;
  @ViewChild('spinner') spinnerElement: any;

  categories: Array<any> = [];
  selectedMenuTarget: any;
  products: Array<any> = [];
  hasmore = true;

  islock = false;

  params = {    favoritesId: 0,    pageNo: 1
  }  constructor(public navCtrl: NavController,
    public appService: AppService) {

  }

  ionViewDidLoad() {    this.getCategories();    this.addScrollEventListener();
  }

  addScrollEventListener() {    this.scrollElement._scrollContent.nativeElement.onscroll = event => {      if (this.spinnerElement) {        //元素顶端到可见区域顶端的距离
        var top = this.spinnerElement.nativeElement.getBoundingClientRect().top;        //可见区域高度
        var clientHeight = document.documentElement.clientHeight;        if (top <= clientHeight) {          console.log("ready loadmore...");          this.doInfinite();
        }
      }
    }
  }  // 获取左侧菜单
  getCategories() {    this.appService.httpGet(AppGlobal.API.getCategories, { appTag: 'dress' }, rs => {      console.debug(rs);      this.categories = rs.data;      //默认获取第一个分类的商品列表
      this.params.favoritesId = this.categories[0].FavoritesId;      this.getProducts();
    })
  }  // 选中左侧菜单
  itemClick(c, event) {    var initSelected: any = document.getElementsByClassName('menuItem');    if (initSelected[0].classList.contains("active")) {
      initSelected[0].classList.remove("active")
    }    //移除上次选中菜单的样式
    if (this.selectedMenuTarget) {      this.selectedMenuTarget.classList.remove("active")
    }    //修改本次选中菜单的样式
    event.currentTarget.classList.add("active");    //将本次选中的菜单记录
    this.selectedMenuTarget = event.currentTarget;    this.hasmore = true;    this.params.favoritesId = c.FavoritesId;    this.params.pageNo = 1;    this.getProducts();
  }

  getProducts() {    this.appService.httpGet(AppGlobal.API.getProducts, this.params, rs => {      this.products = rs.data;      this.params.pageNo += 1;
    })
  }

  doInfinite() {    if (this.islock) {      return;
    }    if (this.hasmore == false) {      return;
    }    this.islock = true;    this.appService.httpGet(AppGlobal.API.getProducts, this.params, d => {      this.islock = false;      if (d.data.length > 0) {        this.products = this.products.concat(d.data);        this.params.pageNo += 1;
      } else {        this.hasmore = false;        console.log("没有数据啦！")
      }
    });
  }

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

这里说明下，addScrollEventListener函数里主要实现的是自定义加载更多功能。

contact.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-grid no-padding>
    <ion-row>
      <ion-col col-3 class="menus">
        <ion-scroll scrollY="true" style="height:100%">
          <ion-list no-lines>
            <ion-item button class="menuItem" *ngFor="let c of categories;let i=index" [ngClass]="{'active': i==0}" text-center (click)="itemClick(c,$event)">
              {{c.FavoritesTitle}} </ion-item>
          </ion-list>
        </ion-scroll>
      </ion-col>
      <ion-col class="items">
        <ion-scroll scrollY="true" #scroll style="height:100%">
          <ion-products [products]="products"></ion-products>
          <ion-row>
            <ion-col class="nodata" text-center *ngIf="!hasmore">
              没有商品啦 (^∇^*)            </ion-col>
          </ion-row>
          <ion-row #spinner *ngIf="hasmore">
            <ion-col text-center>
              <ion-spinner></ion-spinner>
            </ion-col>
          </ion-row>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid></ion-content>

contact.scss

  page-contact {
  background: #efefef;
  .menus {
    height: 100%;
    ion-scroll {
      background-color: #efefef;
    }
  }
  .items {
    height: 100%;
    ion-scroll {
      background-color: #fff;
    }
  }
  ion-grid {
    padding: 0px;
    margin: 0px;
    height: 100%;
    ion-row {
      padding: 0px;
      margin: 0px;
      height: 100%;
      ion-col {
        padding: 0px;
        margin: 0px;
      }
    }
  }
  ion-list {
    ion-item {
      background: #efefef;
    }
  }
  .product {
    .scroll-content {
      margin-bottom: 0px;
    }
  }
  .menus {
    .active {
      background: #fff;
    }
    ion-item {
      background: #efefef;
      ion-label {
        font-family: "黑体";
        font-size: 90%;
      }
    }
  }
}

完！

原文出处：https://www.jianshu.com/p/fda6159adcba