书写人生

技术交流

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

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

实例下载

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭