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}); } }
上一篇: 朱元璋打仗不费一分钱就能养活百万大军 为什么到了后代却不行了呢
下一篇: NodeJs之error
推荐阅读
-
php+jquery+ajax开发抽奖功能模块下载
-
Django 开发拓展 auth 模块,注册用户时发生 ValueError: The given username must be set
-
phpcms模块开发之swfupload的使用介绍
-
Schema ? 模块化,响应式的前端开发框架_html/css_WEB-ITnose
-
使用typescript开发angular模块并发布npm包
-
如何开发出更好的JavaScript模块
-
iOS开发系列--通知与消息机制详解
-
iOS开发之拦截URL转换成本地路由模块URLRewrite详解
-
Android开发之禁止下拉通知栏的方法
-
Android开发之使用通知栏显示提醒信息的方法