ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)-阿里云开发者社区

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

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

简介: 注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。

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

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

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

  • 1.效果图
  • 2.布局思考
  • 3.具体代码展示

1.效果图

img_d81808b646dd5a28a8068c27891b2e81.png
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%;
      }
    }
  }
}

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

完!

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

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

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

其他文章