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%;
      }
    }
  }
}

如果有不理解的地方，欢迎大家在文章下方进行留言，也可通过文章下方的联系方式联系到我。

完！