ionic3项目实战教程 - 第4讲 ionic3商城首页设计(
2017-08-20 本文已影响5230人
IonicBlog
商城首页主要包含以下几个部分
- 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中如何设计透明导航栏。
完！
