欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ionic—发现模块开发

程序员文章站 2022-06-01 09:30:17
...

一.发现页面布局开发

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