1. 先来看看效果图
实现的效果图
点击其中一条后的跳转
返回后，红点消失，并且下面tabs数字变化
2. 开始实现这个功能，我们在一个新的项目中测试并实现，项目打开后是这样的
项目打开页面情况
我们首先在contact上实现消息小图标
如图在tabs上显示消息提示
实现代码：
tabs.html页面代码
tabs实现代码
tabs.html页面代码：
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="{{messageTabBadge}}" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { Events } from 'ionic-angular';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
messageTabBadge: number = 0;
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
constructor(public events: Events) {
this.events.subscribe('messageTabBadge:change', (number)=>{
this.messageTabBadge = number;
})
}
}
3. 上面就实现了显示小图标，并且在tabs.ts代码中有一个Event事件的代码，这个代码是用来实现监听tabs上数目改变的关键代码。下面实现点击按钮改变tabs上的数字，实现情况如图：
点击前
点击后变为20
实现代码：
contact.html页面
<button ion-button item-end full (click)="changeMessageTabBadge()">消息提示</button>
contact.ts页面代码
import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';
import { PtestPage } from '../ptest/ptest'; //引入ptest页面
@Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
public PtestPage=PtestPage;
messageTabBadge: number = 0;
constructor(public navCtrl: NavController,public events: Events) {
}
changeMessageTabBadge(){
this.messageTabBadge = 20;
this.events.publish('messageTabBadge:change',this.messageTabBadge, Date.now());
}
}
4. 这样就实现了改变tabs上的消息数字，后面需要实现的就是点击一条消息tabs上的数字减1，这个要实现起来要简单一些，因为要请求后台我就不具体贴了，说一下实现过程，用storage来缓存数据，然后进行存取，这样来实现数字的减少，这里说一下ionic缓存数据有两种local storage和session storage两种，缓存的数据大小是5M，所以不要缓存太大数据，两种的区别自己找吧，我用的是local storage，然后用这个缓存后可以实现数字减小，但是点击后将为查看标记为已查看还是需要存数据库，用于一个字段进行区分标记，因为下次进来要重写请求数据，没有找到不存数据库的好方法，如果大家有更好的方法，记得告诉我。
这期就这样了，有时间再回来完善一下，咕咕咕～～～
我的QQ：1216078547，欢迎交流！
以上，20190903，下期，来说一下表单提交和照片文件一起提交流程，嗷
网友评论