关闭

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

1757人阅读 评论(0) 收藏 举报
分类:

在APP中通常会用到未读消息数的提醒,效果如下:

那么我们应该怎么实现该效果呢?先附上效果图:

源码

  • index.js

  1. //获取应用实例
  2. var app = getApp()
  3. // 生成img文件的目录
  4. function Img(filename, state) {
  5. //定义img文件所在的文件夹
  6. const IMG_FILES_FOLDER = "../../img/";
  7. //定义img文件的后缀
  8. const SUBFIX = ".png";
  9. //数组转换字符串
  10. if (state === undefined) {
  11. return [
  12. IMG_FILES_FOLDER,
  13. filename,
  14. SUBFIX
  15. ].join("");
  16. }
  17. //数组转换字符串并用-做分割
  18. else {
  19. return [
  20. IMG_FILES_FOLDER,
  21. filename,
  22. "-",
  23. state,
  24. SUBFIX
  25. ].join("");
  26. }
  27. }
  28. var page;
  29. Page({
  30. data: {
  31. userInfo: {},
  32. dataForTabbar: [
  33. {
  34. iCount: 0, //未读数目
  35. sIconUrl: Img("contact"), //按钮图标
  36. sTitle: "会话", //按钮名称
  37. },
  38. {
  39. iCount: 1, //未读数目
  40. sIconUrl: Img("home"), //按钮图标
  41. sTitle: "主页", //按钮名称
  42. },
  43. {
  44. iCount: 99, //未读数目
  45. sIconUrl: Img("setting"), //按钮图标
  46. sTitle: "设置", //按钮名称
  47. },
  48. ],
  49. },
  50. test:function(){
  51. wx.navigateTo({
  52. url: '../test/test',
  53. success: function(res){
  54. // success
  55. },
  56. fail: function() {
  57. // fail
  58. },
  59. complete: function() {
  60. // complete
  61. }
  62. })
  63. }
  64. ,
  65. onLoad: function() {
  66. // console.log('onLoad')
  67. page = this
  68. var that = this
  69. //调用应用实例的方法获取全局数据
  70. app.getUserInfo(function(userInfo) {
  71. //更新数据
  72. that.setData({
  73. userInfo: userInfo
  74. })
  75. })
  76. },
  77. //逻辑代码
  78. //事件处理函数
  79. onTabItemTap(ev) {
  80. let key = ev.currentTarget.dataset.key;
  81. setCounts({
  82. key
  83. });
  84. }
  85. })
  86. function setCounts( obj ) {
  87. let {
  88. key
  89. } = obj;
  90. let {
  91. dataForTabbar
  92. } = page.data;
  93. let data = dataForTabbar.map((item) => {
  94. let {
  95. iCount,
  96. sIconUrl,
  97. sTitle
  98. } = item;
  99. if (sTitle === key) {
  100. ++iCount;
  101. }
  102. return {
  103. iCount,
  104. sIconUrl,
  105. sTitle
  106. };
  107. });
  108. page.setData({
  109. dataForTabbar: data
  110. })
  111. }
  • index.wxml

  1. <import src="../template/tabbar.wxml"/>
  2. <!--index.wxml-->
  3. <view class="container">
  4. <view class="userinfo" bindtap="test">
  5. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  6. </view>
  7. </view>
  8. <view class="footer">
  9. <template is="tab-bar" data="{{ dataForTabbar }}"/>
  10. </view>
  • index.wxss

  1. .userinfo {
  2. display: flex;
  3. flex-direction: column;
  4. align-items: center;
  5. }
  6. .userinfo-avatar {
  7. width: 128rpx;
  8. height: 128rpx;
  9. margin: 20rpx;
  10. border-radius: 50%;
  11. }
  12. .userinfo-nickname {
  13. color: #aaa;
  14. }
  15. .footer {
  16. position: absolute;
  17. bottom: 0;
  18. left: 0;
  19. width: 100%;
  20. display: flex;
  21. flex-direction: row;
  22. background-color: #F7F7FA;
  23. border-top: 1px solid #D2D2D2;
  24. }
  25. /**引入tabbar的样式**/
  26. @import "../template/tabbar.wxss";
  • tabbar.wxml
  1. <template name="tab-bar">
  2. <view class="tab-bar">
  3. <view class="tab-item"
  4. wx:for="{{ dataForTabbar }}"
  5. wx:for-item="tabItem"
  6. wx:for-index="index"
  7. wx:key="sTitle">
  8. <template is="tab-item" data="{{ tabItem }}"></template>
  9. </view>
  10. </view>
  11. </template>
  12. <template name="tab-item">
  13. <!--绑定一个onTabItemTap方法-->
  14. <view class="tab-content" bindtap="onTabItemTap" data-key="{{ tabItem.sTitle }}">
  15. <!--tabBar图标-->
  16. <view class="tab-icon">
  17. <image src="{{ tabItem.sIconUrl }}"></image>
  18. </view>
  19. <!--tabBar标题-->
  20. <view class="tab-title">
  21. <text>{{ tabItem.sTitle }}</text>
  22. </view>
  23. <!--未读信息气泡-->
  24. <view class="tab-bubble" wx:if="{{ tabItem.iCount > 0}}">
  25. <text class="tab-count">{{ tabItem.iCount < 100? tabItem.iCount: 99+"+" }}</text>
  26. </view>
  27. </view>
  28. </template>
  • tabbar.wxss
  1. .tab-bar {
  2. flex-direction: row;
  3. flex: 1;
  4. display: flex;
  5. justify-content: space-around;
  6. }
  7. .tab-item {
  8. display: inline-block;
  9. flex-direction: column;
  10. align-content: center;
  11. justify-content: center;
  12. position: relative;
  13. padding-top: 10px;
  14. padding-bottom: 4px;
  15. }
  16. .tab-content {
  17. display: inline-block;
  18. flex-direction: column;
  19. align-content: center;
  20. justify-content: center;
  21. position: relative;
  22. }
  23. .tab-icon {
  24. display: flex;
  25. justify-content: center;
  26. align-items: center;
  27. flex: 1;
  28. }
  29. image {
  30. width: 24px;
  31. height: 24px;
  32. }
  33. .tab-title {
  34. display: flex;
  35. font-size: 14px;
  36. line-height: 18px;
  37. }
  38. .tab-bubble {
  39. background-color: #E64340;
  40. text-align: center;
  41. justify-content: flex-start;
  42. align-content: center;
  43. position: absolute;
  44. top: -7px;
  45. right: -3px;
  46. width: 18px;
  47. height: 18px;
  48. line-height: 13px;
  49. border-radius: 9px;
  50. }
  51. .tab-count {
  52. color: white;
  53. font-size: 10px;
  54. }

实例下载

0
0
查看评论

微信小程序顶部滑动tab

小程序商品展示需要导航栏的商品分类进行滑动 效果图: 首先是滑动的效果:  小程序使用,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导航栏下面的省略号加上(因为tab-nac...
  • qq442270636
  • qq442270636
  • 2018-01-17 14:28
  • 73

微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法

对于微信事件,不多说,自己看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161122 效果 首先,注意一下微信小程序事件触发顺序     单击 touc...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016-12-20 13:05
  • 10449

微信小程序之『仿 QQ 消息气泡拖拽消失』

转载:请写明掘金原文链接及作者名 ‘小小小’ 一个潜心研究小程序QQ群:139128168 ← 点击加群 今天带来的是仿QQ消息气泡拖拽消失特效,源码中很多地方还是有很多不足,希望大家一起齐心协力,给我提出宝贵意见,咱们一起来继续完善此效果~~先看效果:原理并没有想象得那么简单,我们拆分来逐步分...
  • laokdidiao
  • laokdidiao
  • 2016-12-28 01:02
  • 1184

微信小程序-bindtap等事件传参

什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如 id, dataset, touches。 看图,因为需要传递的数据比较多,所以我们通...
  • u013778905
  • u013778905
  • 2017-03-01 20:28
  • 31095

微信小程序之toast等弹框提示

微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT)。 看下有关参数说明: 代码很简单: wx.showToast({ title: '成功', icon: '...
  • hedong_77
  • hedong_77
  • 2017-02-09 16:19
  • 21008

微信小程序-消息提示框

.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: ? 1 2 3 4 5 wx.showToast({  title: '成功',  ...
  • yelin042
  • yelin042
  • 2017-05-16 15:17
  • 1109

微信小程序实例:开发showToast消息提示接口

相信在学习小程序文档或者已经创建项目的开发员们,都很清楚小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式,那假如我想要的是不要图标只要存粹的文字提醒呢?或者是我不要微信单方面提供的那种图片呢?想要自己指定的情况呢?这时候要怎么办.. ...
  • eadio
  • eadio
  • 2017-01-24 11:24
  • 14590

微信小程序模板消息无限制群发

微信小程序模板消息无限制群发
  • qq_38125123
  • qq_38125123
  • 2017-07-10 11:35
  • 18576

微信小程序实例:创建下发模板消息实例

鉴于目前网络上都还找不到小程序下发模板消息的相关资源,在多次阅读了官方文档今天终于把小程序的模版消息给测通了,接下来介绍在不使用服务器的情况下,前端开发人员在本地怎么测试模板消息的发送。 1、在微信公众平台-小程序的模板中心先申请一个下发模板消息 2、根据文档提及的模板消息做法分...
  • eadio
  • eadio
  • 2016-12-13 15:45
  • 29866

微信小程序标签栏tabBar

微信小程序主页面大部分都定义了底部标签栏,定义一个标签栏只需要在app.json里做声明即可,代码如下: "tabBar": {     "color": "black",    ...
  • chinaboyliusir
  • chinaboyliusir
  • 2017-01-13 15:40
  • 4405
    个人资料
    • 访问:304475次
    • 积分:4997
    • 等级:
    • 排名:第6710名
    • 原创:131篇
    • 转载:373篇
    • 译文:4篇
    • 评论:27条
    技术交流
    QQ联系方式:326202439
    最新评论