Ionic—通知模块开发

一.通知模块页面布局开发

1.实例代码

<ion-header>
  <ion-navbar>
    <ion-title>通知</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <!-- 通知头像 -->
      <ion-avatar item-left>
        <img src="">
      </ion-avatar>
      <!-- 通知内容 -->
      <h2></h2>
      <p></p>
    </ion-item>
  </ion-list>
</ion-content>

二.通知页面的列表数据加载

1.开发技巧

• 有时候ionic会报view不能隐藏，此时将loading.dismiss()变成loading.dismissAll()就可以了，dismissAll表示关闭所有的loading

2.实例代码

• notifications.html

  <ion-header>
    <ion-navbar>
      <ion-title>通知</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item *ngFor="let n of notificationList" (click)="getDetails(n.questionId)">
        <!-- 通知头像 -->
        <ion-avatar item-left>
          <img src="{{n.headFace}}">
        </ion-avatar>
        <!-- 通知内容 -->
        <h2>{{n.notificationTitle}}</h2>
        <p>{{n.notificationMessage}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
  

• notifications.ts

  import { Component } from '@angular/core';
  import { NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';
  import { Storage } from '@ionic/storage';
  import { BaseUI } from '../../common/baseUI';
  import { DetailsPage } from '../details/details';
  
  @Component({
    selector: 'page-notifications',
    templateUrl: 'notifications.html',
  })
  export class NotificationsPage extends BaseUI{
  
    notificationList:any;
  
    constructor(
      public navCtrl: NavController, 
      public navParams: NavParams,
      public storage: Storage,
      public loadingCtrl: LoadingController,
      public toastCtrl: ToastController) {
        super();
    }
  
    ionViewDidLoad() {
      this.storage.get('token').then((val)=>{
        if(val !== null){
          let loading = this.showLoading(this.loadingCtrl,'Loading...');
          //模拟发送请求，获取提醒数据
          setTimeout(()=>{
            this.notificationList = [
              {questionId:1,headFace:'../../assets/imgs/logo.png',notificationTitle:'更新维护',notificationMessage:'明日系统更新一天'},
              {questionId:2,headFace:'../../assets/imgs/avatar.jpg',notificationTitle:'更新维护',notificationMessage:'明日系统更新一天'},
              {questionId:3,headFace:'../../assets/imgs/logo.png',notificationTitle:'更新维护',notificationMessage:'明日系统更新一天'},
              {questionId:4,headFace:'../../assets/imgs/avatar.jpg',notificationTitle:'更新维护',notificationMessage:'明日系统更新一天'},
              {questionId:5,headFace:'../../assets/imgs/logo.png',notificationTitle:'更新维护',notificationMessage:'明日系统更新一天'},
            ];
            loading.dismissAll();
          },500)
        }
      })
    }
  
    getDetails(questionId) {
      this.navCtrl.push(DetailsPage,{id:questionId});
    }
  }