注意，干货来了，相比前面几讲这一讲就要难以消化多了，请做好心理准备。
因为在这之前，经常看到有群友在求这种分类菜单的组建，今天我就为大家再造一个轮子 [微笑脸]。
这一讲主要包含以下几个部分：
- 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%;
}
}
}
}
如果有不理解的地方，欢迎大家在文章下方进行留言，也可通过文章下方的联系方式联系到我。
完！
