Ionic—发现模块开发

一.发现页面布局开发

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

Ionic—发现模块开发

一.发现页面布局开发

1.开发设计

2.实例代码

二.发现页面逻辑开发

1.开发设计

2.实例代码

猜你喜欢