微信息小程序 有没有什么办法让小程序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";

• tabbar.wxml

<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>

• tabbar.wxss

.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;
}

实例下载

• [百度云]微信小程序组件之带有未读数的的TabBar
• [Coding]微信小程序组件之带有未读数的的TabBar