【Appetite】ionic3實(shí)錄（七）次頁實(shí)現(xiàn)及分析解決問題【上】

最近有點(diǎn)忙，好久沒更新了，還好沒人催稿，也沒人想打我……

這次我們要實(shí)現(xiàn)這個(gè)頁面效果：


image.png

這個(gè)頁面其實(shí)很簡單的，唯一有點(diǎn)麻煩的是上面那個(gè)輪播圖。

現(xiàn)在開始實(shí)現(xiàn)這個(gè)頁面，步驟如下：

一、先創(chuàng)建數(shù)據(jù)

在src/app/assets/data目錄創(chuàng)建dessert-slides.json文件并添加如下內(nèi)容作為輪播圖的數(shù)據(jù)源：

{
  "success": "true",
  "result": [{
    "src": "../assets/imgs/foods/1.jpg"
  }, {
    "src": "../assets/imgs/foods/2.jpg"
  }, {
    "src": "../assets/imgs/foods/3.jpg"
  }, {
    "src": "../assets/imgs/foods/4.jpg"
  }]
}

同目錄下創(chuàng)建dessert-list.json文件并添加如下內(nèi)容作為甜點(diǎn)列表的數(shù)據(jù)源：

{
  "success": "true",
  "result": [{
    "title": "DIPPED APRICOTS",
    "desc": "BY RENEE",
    "src": "../assets/imgs/foods/1.jpg"
  }, {
    "title": "DIPPED DESSERT",
    "desc": "BY AMY HINE",
    "src": "../assets/imgs/foods/2.jpg"
  }]
}

二、創(chuàng)建數(shù)據(jù)服務(wù)

執(zhí)行命令創(chuàng)建數(shù)據(jù)服務(wù)aboutProvider：

ionic g provider about

打開生成的文件并添加如下兩個(gè)方法：

  /**
   * 獲取甜點(diǎn)輪播圖片
   */
  getDessertSlides(){
    return this.commonProvider.get("../assets/data/dessert-slides.json", false);
  }

  /**
   * 獲取甜點(diǎn)列表
   */
  getDessertList(){
    return this.commonProvider.get("../assets/data/dessert-list.json", false);
  }

三、改造頁面

修改about.ts為：

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { AboutProvider } from '../../providers/about/about';

declare let Swiper: any;

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  vm: {
    dessertSlides: any[],    //輪播數(shù)據(jù)源
    dessertList: any[],    //甜點(diǎn)列表數(shù)據(jù)源
    selectedSegment: string    //segment選擇對象
  } = {
    dessertSlides: [],
    dessertList: [],
    selectedSegment: 'one'
  };
  constructor(public navCtrl: NavController, private aboutProvider: AboutProvider, private cd: ChangeDetectorRef) {
  }

  ionViewDidLoad() {
    this.getDessertSlides();
    this.getDessertList();
  }

  /**
   * 獲取甜點(diǎn)輪播圖片
   */
  getDessertSlides(){
    return this.aboutProvider.getDessertSlides().then((rep: any) => {
      this.vm.dessertSlides = rep.result;
      this.cd.detectChanges();
      this.initSwiper();
      return rep;
    });
  }

  /**
   * 獲取甜點(diǎn)列表
   */
  getDessertList(){
    return this.aboutProvider.getDessertList().then((rep: any)=>{
      this.vm.dessertList = rep.result;
      return rep;
    });
  }

  /**
   * 初始化Swiper
   */
  initSwiper() {
    new Swiper('.wheel .swiper-container', {
      slidesPerView: 2,
      initialSlide: 1,
      watchActiveIndex: true,
      centeredSlides: true,
      resizeReInit: true,
      keyboardControl: true,
      grabCursor: true
    });
  }
}

對用于綁定的對象，我一般把它們放在一個(gè)叫vm的對象下，便于肉眼區(qū)分是綁定對象還是普通變量，這樣當(dāng)看到帶vm前綴的變量賦值時(shí)，就會想到要刷新頁面視圖的情況，從而可以做一些相關(guān)處理，或避免頻繁刷新。

代碼應(yīng)該比較容易理解吧？其中有沒有留意到一個(gè)細(xì)節(jié)：initSwiper方法為什么放在獲取數(shù)據(jù)之后？它放在其它地方可以嗎？此外，它上面為什么會放個(gè)this.cd.detectChanges()？這些合為問題一。

修改about.html為：

<ion-header class="primary-bg" no-border>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only color="light">
         <ion-icon name="md-add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      RECIPE ARCHIVE
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="light">
          <ion-icon name="md-menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
    <ion-segment mode="md" [(ngModel)]="vm.selectedSegment">
      <ion-segment-button value="one">
        DESSERT
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="two">
        DRINKS
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="three">
        EINKORN
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="four">
        LIFESTYLE
        <div class="bolder-sm"></div>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div [hidden]="vm.selectedSegment != 'one'" class="wheel">
     <!-- <ion-slides centeredSlides="true" slidesPerView="2" initialSlide="1" zoom="false" >
      <ion-slide *ngFor="let item of vm.dessertSlides">
        <img [src]="item.src" />
      </ion-slide>
    </ion-slides> -->
     <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let item of vm.dessertSlides">
          <div class="slide-zoom">
            <img [src]="item.src" />
          </div>
        </div>
      </div>
    </div>  
    <div text-center *ngFor="let item of vm.dessertList" padding-left padding-right>
      <h5><strong>{{item.title}}</strong></h5>
      <p>{{item.desc}}</p>
      <img [src]="item.src" style="height: 140px; width: 100%;" />
    </div>
  </div>
  <div [hidden]="vm.selectedSegment !='two'">segment二</div>
  <div [hidden]="vm.selectedSegment != 'three'">segment三</div>
  <div [hidden]="vm.selectedSegment != 'four'">segment四</div>
</ion-content>

無論text-center還是padding-left等，用的都是ionic的指令，同樣有沒有留意到細(xì)節(jié)：為什么用[hidden]，不用*ngIf或者ngSwitch？此為問題二。

<div class="swiper-container">標(biāo)簽內(nèi)容能否換成注釋掉的<ion-slides>內(nèi)容？此為問題三。

修改about.scss為：

.swiper-container {
    width: 100%;
    height: 150px;
    //實(shí)現(xiàn)上下紅白色各半
    background: linear-gradient(to bottom, color($colors, primary) 50%, color($colors, light) 50%)
  }
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    height: 100%;
    width: 100%;
  }
  //非激活的圖片縮小為0.9倍
  .swiper-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: 2px solid #fff;
    position: relative; 
    //   box-shadow: 0px 2px 5px rgba(0, 0, 0, 1);
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-backface-visibility: hidden;
  }
  //激活的圖片恢復(fù)為原來的大小
  .swiper-slide-active img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  .swiper-slide .slide-zoom {
    height: 100%;
    padding: 10px 10px 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

其中//的為重要注釋，主要是為了實(shí)現(xiàn)中間大，兩邊小的效果。

最后運(yùn)行看下效果：

運(yùn)行效果圖

問題解釋留到下篇再講，要?jiǎng)觿?dòng)手調(diào)試下才能思考下原因。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 上一節(jié)提到幾個(gè)問題，現(xiàn)在我們逐一來解釋一下： 問題一：initSwiper方法為什么放在獲取數(shù)據(jù)之后？它放在其它地...
    IT晴天閱讀 1,074評論 13贊 8
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,568評論 19贊 139
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序：基本語法，類相關(guān)的語法，內(nèi)部類的語法，繼承相關(guān)的語法，異常的語法，線程的語...
    子非魚_t_閱讀 34,706評論 18贊 399
  • 女兒上幼兒園前，我走路上下班，單程30分鐘，往返1個(gè)小時(shí)步行當(dāng)鍛煉。 女兒上幼兒園后，要接送女兒，改成打車。方便是...
    皋辜格琢閱讀 686評論 4贊 2
  • 面試的那天，我化了淡妝 老板娘來了看我一眼說:面試這么重要的事情你都不化妝！ 于是從入職第一天，我就開始每天化濃妝...
    想要去非洲的夢想閱讀 498評論 2贊 1

友情鏈接更多精彩內(nèi)容