注意幻件，干貨來了，相比前面幾講這一講就要難以消化多了蛔溃，請做好心理準備傲武。
因為在這之前，經(jīng)吵情唬看到有群友在求這種分類菜單的組建，今天我就為大家再造一個輪子 [微笑臉]态兴。
這一講主要包含以下幾個部分：
- 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已經(jīng)有了一個?初步的認識正勒，那么讀懂以下代碼應該不是難事。
以下分別是 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) {
//元素頂端到可見區(qū)域頂端的距離
var top = this.spinnerElement.nativeElement.getBoundingClientRect().top;
//可見區(qū)域高度
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("沒有數(shù)據(jù)啦！")
}
});
}
goDetails(item) {
this.navCtrl.push('ProductDetailsPage', { item: item });
}
}
這里說明下非洲，addScrollEventListener函數(shù)里主要實現(xiàn)的是自定義加載更多功能鸭限。
contact.html
<ion-header>
<ion-navbar style="opacity: 0.8" no-border-bottom color="primary">
<ion-title>優(yōu)惠精選</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%;
}
}
}
}
如果有不理解的地方蜕径，歡迎大家在文章下方進行留言，也可通過文章下方的聯(lián)系方式聯(lián)系到我败京。
完兜喻！
