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

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

完！