一.發現頁面佈局開發

1.開發設計

• 使用ion-refresher元件實現頁面的下拉重新整理

• 完成發現頁面的佈局

• 開發技巧

  • 開發時每次重新整理都會重新到第一個頁面,給tab中的html設定selectedIndex的屬性值，從0開始

    <ion-tabs selectedIndex="1">
      <ion-tab [root]="Home" tabTitle="首頁" tabIcon="home"></ion-tab>
      <ion-tab [root]="Discovery" tabTitle
     
    ="發現" tabIcon="navigate"></ion-tab>
      <ion-tab [root]="Chatbubbles" tabTitle="冒泡" tabIcon="chatbubbles"></ion-tab>
      <ion-tab [root]="Notifications" tabTitle="提醒" tabIcon="notifications"></ion-tab>
      <ion-tab [root]="More" tabTitle="更多" tabIcon="more"></ion-tab>
     
    
    </ion-tabs>
    

2.例項程式碼

<ion-header>
  <ion-navbar>
    <ion-title>發現</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- 重新整理元件 -->
  <ion-refresher (ionRefresh)="doRefresh($event);">
    <ion-refresher-content
      pullingIcon
 
="arrow-down"
      pullingText="下拉重新整理"
      refreshingSpinner="circles"
      refreshingText="資料載入中...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let q of questions;" (click)="gotoDetails(q.id)">
    <ion-item>
      <ion-avatar item-start>
        <img src="{{q.headFace}}"/>
      </ion-avatar>
      <p>
        {{q.userNickName}}開啟了直播間
        <ion-icon class="more_button" name="more"></ion-icon>
      </p>
    </ion-item>
    <h2>{{q.contentTitle}}</h2>
    <ion-card-content>
      <p>{{q.contentSummary}}</p>
    </ion-card-content>
    <ion-row>
      <ion-col col-8 center text-left>
          {{q.watched}}&nbsp;觀看&nbsp;&nbsp;·&nbsp;&nbsp;{{q.love}}&nbsp;愛心&nbsp;&nbsp;·&nbsp;&nbsp;檢視房間
      </ion-col>
      <ion-col col-4></ion-col>
    </ion-row>
  </ion-card>
</ion-content>

二.發現頁面邏輯開發

1.開發設計

• 主要完成發現頁面的邏輯新增，主要學習下拉重新整理頁面的事件
• 頁面ion-refresh元件傳遞的引數是refresh事件，該事件的complete()方法可以關閉頁面的重新整理

2.例項程式碼

import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';
import { DetailsPage } from '../details/details';

@Component({
  selector: 'page-discovery',
  templateUrl: 'discovery.html',
})
export class DiscoveryPage extends BaseUI{

  questions:any[];
  errorMessage:any;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController
  ){
    super();
  }

  //進入時的事件載入
  ionViewDidLoad() {
    this.getQuestion();
  }

  //get question 
  getQuestion() {
    let loading = this.showLoading(this.loadingCtrl,'Loading...');
    setTimeout(()=>{
      this.questions = [
        {"id":1,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Sinar","contentTitle":"你今天很好看","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":2,"headFace":"../../assets/imgs/logo.png","userNickName":"Jack","contentTitle":"快進來呀小夥伴","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":3,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Crystal","contentTitle":"美妝真的美","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":4,"headFace":"../../assets/imgs/logo.png","userNickName":"Ada","contentTitle":"Free Skin完美","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":5,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Ida","contentTitle":"超讚美妝","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":6,"headFace":"../../assets/imgs/logo.png","userNickName":"Adams","contentTitle":"妝出不一樣的你","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":7,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Lerry","contentTitle":"你今天妝了嗎","contentSummary":"這裡後期新增圖片...","watched":100,"love":20}
      ]
      loading.dismiss();
    },500)
  }

  //do refresh，傳遞的是refresh事件
  doRefresh(refresh) {
    setTimeout(()=>{
      this.questions = [
        {"id":2,"headFace":"../../assets/imgs/logo.png","userNickName":"Jack","contentTitle":"快進來呀小夥伴","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":3,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Crystal","contentTitle":"美妝真的美","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":4,"headFace":"../../assets/imgs/logo.png","userNickName":"Ada","contentTitle":"Free Skin完美","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":5,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Ida","contentTitle":"超讚美妝","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":6,"headFace":"../../assets/imgs/logo.png","userNickName":"Adams","contentTitle":"妝出不一樣的你","contentSummary":"這裡後期新增圖片...","watched":100,"love":20},
        {"id":7,"headFace":"../../assets/imgs/avatar.jpg","userNickName":"Lerry","contentTitle":"你今天妝了嗎","contentSummary":"這裡後期新增圖片...","watched":100,"love":20}
      ]
      refresh.complete();//關閉重新整理
    },1500);
  }

  //跳轉詳情頁面
  gotoDetails(questionId) {
    this.navCtrl.push(DetailsPage,{id:questionId});
  }
}