ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)

简介: 商城首页主要包含以下几个部分1.使用ion-slide实现首页幻灯片;2.使用ion-grid实现商品分类;3.使用ion-list实现商品列表;说一下实现思路1.先获取网络请求的数据,查看数据结构;2.根据数据结构来判断需要展示的数据,编写html;3.调整界面样式,编写scss;准备工作开始之前请到阿里开源图标库准备首页需要的小图标,不想自己找的同学,在文章最后的交流群的群文件里有导出好的资源小图标,下载后直接放到项目的src/assets/icon/目录中即可。

商城首页主要包含以下几个部分

  • 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;
    }
  }
}

效果图

img_2b535ca9a1ac98d298b6476194e0f81b.png
4-1.png

下一讲将讲解�在ionic3中如何设计透明导航栏。

完!

目录
相关文章
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1370 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1092 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1067 0
|
Web App开发
ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用
这一讲主要实现商品的"抢购"功能 1.安装ThemeableBrowser插件; 2.使用ThemeableBrowser插件; 1.安装插件 分别执行以下命令: ionic cordova plugin add cordova-plugin-t...
1448 0
ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现
这一讲主要包含以下几个部分: 1.创建商品列表页 2.根据分类获取商品列表 2.展示商品列表 1.创建商品列表页 执行 ionic g page product-list 7-1.
874 0
ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计
这一讲主要包含以下几个部分 1.配置APP主色调; 2.设置ion-content组建的fullscreen属性; 3.设计透明导航栏 配置APP主色调; 找到src/theme/variables.
1335 0
|
设计模式 前端开发 IDE
ionic3项目实战教程 - 第1讲 ionic3环境安装 项目搭建
嘿 好久不见!IONIC3终于趋于稳定,这次的教程选的是一个简单商城案例,主要包含商品分类,和商品列表,商品详情、个人中心。同样,功能很简单,但基本涵盖了实战开发中所用到的内容,包括一些封装思想、网络请求、数据绑定、组建通信、模块懒加载、自定义组件等等。
933 0
|
前端开发
ionic3项目实战教程 - 第2讲 ionic3懒加载配置
配置懒加载需要以下几个步骤: 1.给需要懒加载的页面配置module.ts; 2.在对应页面的.ts文件里增加@IonicPage()特性; 3.在app.
1031 0
|
JSON API 数据格式
ionic3项目实战教程 - 第3讲 ionic3封装全局网络请求服务app.service
ionic3项目实战教程 - 第3讲 �ionic3封装全局网络请求服务app.service 这一讲主要包含以下几个部分 配置全局的接口地址; 封装http get请求参数编码; 封装特定http get请求; 封装特定http post请求; 封装全局的alert和toast; 封装全局获取/移除缓存数据的函数 在app.
1215 0
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1412 0