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

Ionic—通知模块开发

程序员文章站 2022-06-01 09:32:53
...

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

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});
      }
    }
    
相关标签: Ionic