微信息小程序 有没有什么办法让小程序tabbar未读消息数的提醒

在APP中通常会用到未读消息数的提醒，

效果如下：

那么我们应该怎么实现该效果呢？

先附上效果图：

源码

index.js

//获取应用实例

var app = getApp()

// 生成img文件的目录

function Img(filename, state) {

//定义img文件所在的文件夹

const IMG_FILES_FOLDER = "../../img/";

//定义img文件的后缀

const SUBFIX = ".png";

//数组转换字符串

if (state === undefined) {

return [

IMG_FILES_FOLDER,

filename,

SUBFIX

].join("");

}

//数组转换字符串并用-做分割

else {

return [

IMG_FILES_FOLDER,

filename,

"-",

state,

SUBFIX

].join("");

}

}

var page;

Page({

data: {

userInfo: {},

dataForTabbar: [

{

iCount: 0, //未读数目

sIconUrl: Img("contact"), //按钮图标

sTitle: "会话", //按钮名称

},

{

iCount: 1, //未读数目

sIconUrl: Img("home"), //按钮图标

sTitle: "主页", //按钮名称

},

{

iCount: 99, //未读数目

sIconUrl: Img("setting"), //按钮图标

sTitle: "设置", //按钮名称

},

],

},

test:function(){

wx.navigateTo({

url: '../test/test',

success: function(res){

// success

  },

fail: function() {

// fail

  },

complete: function() {

// complete

  }

})

}

,

onLoad: function() {

// console.log('onLoad')

page = this

var that = this

//调用应用实例的方法获取全局数据

app.getUserInfo(function(userInfo) {

//更新数据

that.setData({

userInfo: userInfo

})

})

},

//逻辑代码

//事件处理函数

onTabItemTap(ev) {

let key = ev.currentTarget.dataset.key;

setCounts({

key

});

}

})

function setCounts( obj ) {

let {

key

}= obj;

let {

dataForTabbar

}= page.data;

let data = dataForTabbar.map((item) => {

let {

iCount,

sIconUrl,

sTitle

}= item;

if (sTitle === key) {

++iCount;

}

return {

iCount,

sIconUrl,

sTitle

};

});

page.setData({

dataForTabbar: data

})

}

index.wxml

<import src="../template/tabbar.wxml"/>

<!--index.wxml-->

<view class="container">

<view class="userinfo" bindtap="test">

<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

</view>

</view>

<view class="footer">

<template is="tab-bar" data="{{ dataForTabbar }}"/>

</view>

index.wxss

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname {

color: #aaa;

}

.footer {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

display: flex;

flex-direction: row;

background-color: #F7F7FA;

border-top: 1px solid #D2D2D2;

}

/**引入tabbar的样式**/

@import "../template/tabbar.wxss";

<template name="tab-bar">

<view class="tab-bar">

<view class="tab-item"

wx:for="{{ dataForTabbar }}"

wx:for-item="tabItem"

wx:for-index="index"

wx:key="sTitle">

<template is="tab-item" data="{{ tabItem }}"></template>

</view>

</view>

</template>

<template name="tab-item">

<!--绑定一个onTabItemTap方法-->

<view class="tab-content" bindtap="onTabItemTap" data-key="{{ tabItem.sTitle }}">

<!--tabBar图标-->

<view class="tab-icon">

<image src="{{ tabItem.sIconUrl }}"></image>

</view>

<!--tabBar标题-->

<view class="tab-title">

<text>{{ tabItem.sTitle }}</text>

</view>

<!--未读信息气泡-->

<view class="tab-bubble" wx:if="{{ tabItem.iCount > 0}}">

<text class="tab-count">{{ tabItem.iCount < 100? tabItem.iCount: 99+"+" }}</text>

</view>

</view>

</template>

.tab-bar {

  flex-direction: row;

flex: 1;

display: flex;

justify-content: space-around;

}

.tab-item {

display: inline-block;

  flex-direction: column;

align-content: center;

justify-content: center;

position: relative;

padding-top: 10px;

padding-bottom: 4px;

}

.tab-content {

display: inline-block;

  flex-direction: column;

align-content: center;

justify-content: center;

position: relative;

}

.tab-icon {

display: flex;

justify-content: center;

  align-items: center;

flex: 1;

}

image {

width: 24px;

height: 24px;

}

.tab-title {

display: flex;

font-size: 14px;

line-height: 18px;

}

.tab-bubble {

background-color: #E64340;

text-align: center;

justify-content: flex-start;

align-content: center;

  position: absolute;

top: -7px;

right: -3px;

width: 18px;

height: 18px;

line-height: 13px;

border-radius: 9px;

}

.tab-count {

color: white;

font-size: 10px;

}

实例下载