商城首页主要包含以下几个部分
1.使用ion-slide实现首页幻灯片；
2.使用ion-grid实现商品分类；
3.使用ion-list实现商品列表；
说一下实现思路
1.先获取网络请求的数据，查看数据结构；
2.根据数据结构来判断需要展示的数据，编写html；
3.调整界面样式，编写scss；
准备工作
开始之前请到阿里开源图标库准备首页需要的小图标，不想自己找的同学，在文章最后的交流群的群文件里有导出好的资源小图标，下载后直接放到项目的src/assets/icon/目录中即可。
并在index.html的header节点中导入资源图标库；
index.html
<link href="assets/icon/iconfont.css" rel="stylesheet">
详细代码如下：
home.ts
import { AppService, AppGlobal } from './../../app/app.service';import { Component } from '@angular/core';import { NavController, IonicPage } from 'ionic-angular';@IonicPage()@Component({
selector: 'page-home',
templateUrl: 'home.html'})export class HomePage {
slides: Array<any> = [];
categories: Array<any> = [];
products: Array<any> = [];
spinner1: boolean = true;
params = {
favoritesId: 2054400,
pageNo: 1,
pageSize: 20
} constructor(public appService: AppService, public navCtrl: NavController) { this.getSlides(); this.getCategories(); this.getProducts();
} //获取幻灯片
getSlides() { var params = {
favoritesId: 2056439,
pageNo: 1,
pageSize: 5
} this.appService.httpGet(AppGlobal.API.getProducts, params, rs => { console.debug(rs); this.slides = rs.data; this.spinner1 = false;
})
} //获取分类
getCategories() { this.appService.httpGet(AppGlobal.API.getCategories, { appTag: 'dress' }, rs => { console.debug(rs); this.categories = rs.data;
})
} //获取首页推荐列表
getProducts() { this.appService.httpGet(AppGlobal.API.getProducts, this.params, rs => { console.debug(rs); this.products = rs.data;
})
} //商品详情
goDetails(item) { console.debug('go details...')
}
}home.html
<ion-header>
<ion-navbar color="primary">
<ion-title>首页</ion-title>
</ion-navbar></ion-header><ion-content>
<ion-row *ngIf="spinner1">
<ion-col text-center>
<ion-spinner></ion-spinner>
</ion-col>
</ion-row>
<ion-slides>
<ion-slide *ngFor="let item of slides" (click)="goDetails(item)">
< img src="{{item.PictUrl}}" alt="">
<div class="cover"></div>
<span class="title">{{item.Title}}</span>
</ion-slide>
</ion-slides>
<div class="categories">
<ion-grid>
<ion-row wrap>
<ion-col text-center tappable col-3 *ngFor="let c of categories" (click)="goProductList(c)">
<i class="iconfont {{c.Icon}} icon"></i>
<span class="title">{{c.FavoritesTitle}}</span>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-item-divider class="t-header" color="light"> 年会礼服2017年新款 </ion-item-divider>
<div class="product">
<ion-row wrap>
<ion-col tappable col-6 *ngFor="let p of products" (click)="goDetails(p)">
<img src="{{p.PictUrl}}" alt=""/>
<p>{{p.Title}}</p>
<div class="list-price buy">
<span class="price-new"><i>￥</i>{{p.ZkFinalPrice}}</span>
<i class="del">￥<span>{{p.ReservePrice}}</span></i>
</div>
</ion-col>
</ion-row>
</div></ion-content>html.scss
page-home {
ion-slides { height: 30%; .cover { position: absolute; bottom: 0px; width: 100%; height: 20px; background: linear-gradient(to right, #673743, #f9537d); opacity: 0.6;
} .title { position: absolute; bottom: 0px; width: 90%; height: 20px; line-height: 20px; font-size: 60%; left: 5px; text-align: center; color: white;
}
} .categories { .title { font-family: "黑体-简"; font-weight: 300; color: #808080; font-size: 80%; display: block; margin-top: 5px;
}
ion-row { background-color: #efefef; padding: 0px;
}
ion-col { background-color: white; /*border: 1px solid #efefef;*/
}
} .icon { border-radius: 100px; color: white; background-color: #f8285c; font-size: 36px !important; padding: 5px;
} .c1 { background-color: orangered;
} .c2 { background-color: blueviolet;
} .c3 { background-color: sandybrown;
} .c4 { background-color: slateblue;
} .c5 { background-color: orange;
} .c6 { background-color: dimgray;
} .t-header { font-family: "黑体-简"; font-weight: 300; color: #f8285c; border-left: 2px solid #f8285c; border-top: 5px solid #efefef; background: white;
} .stores { .title { font-family: "黑体-简"; font-weight: 300; color: #808080; font-size: 80%; display: block; margin-top: 5px;
}
ion-row { background-color: #efefef; padding: 0px;
}
ion-col { background-color: white; border: 1px solid #efefef;
}
} .product {
ion-row { background-color: #efefef; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; padding-top: 3px;
ion-col { position: relative; background-color: white; border: 2px solid #efefef; border-radius: 2px; padding: 0px; p { margin: 0px; padding: 0px; width: 100%; font-size: 12px; font-family: "黑体-简"; font-weight: 300; color: #808080; height: 26px; line-height: 26px; background: rgba(255, 255, 255, 0.8); overflow: hidden; text-indent: 5px;
}
}
} .list-price { width: 98%; height: 26px; line-height: 18px; position: relative; bottom: 0; margin: 0 2%;
} .price-new { font-size: 18px; color: #f8285c;
} .list-price i { font-style: normal; font-size: 12px;
} .del { color: rgba(171, 171, 171, 1); text-decoration: line-through; margin-left: 2px;
} .good-btn { display: block; position: absolute; height: 16px; line-height: 12px; color: #f8285c; font-size: 13px; font-family: "黑体-简"; text-align: right; top: 5px; right: 2px;
} .quan_img { position: absolute; width: 61px; height: 55px; z-index: 5; right: 0; top: 0; cursor: pointer; background: url(/assets/img/quan.png) no-repeat; background-size: contain; color: #fff;
} .quan_img .num_money { font-family: Arial; font-size: 18px; height: 40px; left: 9px; position: absolute; text-align: center; top: 14px; width: 40px;
}
}
}效果图
4-1.png
下一讲将讲解�在ionic3中如何设计透明导航栏。
完！
作者：IonicBlog
链接：https://www.jianshu.com/p/2746ece3aa0d
随时随地看视频
