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

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

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

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

1.效果图

2.布局思考

3.具体代码展示

1.效果图

10-1.png

2.布局思考

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

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

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
     
       = [];  selectedMenuTarget: any;  products: Array
      
        = [];  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


       
          
       
        优惠精选
         
      
     
       
          
             
                
                   
           
           
             { {c.FavoritesTitle}} 
            
                  
               
              
                
                   
                    
           
           
             没有商品啦 (^∇^*)

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

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

完！