微信小程序 - 详细实现底部菜单tabbar显示消息数量或数值变化展示等场景，实时监听globalData全局变量，微信小程序监听App中的globalData全局数据监听，用作公共数据展示（详细代码

于 2024-08-08 23:29:13 发布
阅读量101 收藏 3
点赞数 9
分类专栏： 前端组件与功能(开箱即用) 文章标签： 微信小程序 自定义底部导航菜单加数字角标 tabbar菜单动态改变徽标数 globalData全局变量 watch监听全局变量刷新数值 实时监测网络情况断网等需求 聊天消息数 消息中心 公告角标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/141038033
版权

效果图

在微信小程序开发中，详细实现自定义或原生tabbar底部菜单导航中，存在类似消息中心、公告、聊天、网络实时监测状态是否断网等需求（需要一个全局变量，无时无刻刷新和改变），需要有一个角标数字，并且需要 “全局监听” 实时改变更新这个值，无论在任何页面都能保证这个数值能随时变化更新，在小程序中实现全局监听globalData变量数据，无论在页面或组件中都可以对globalData全局变量进行修改，然后底部导航菜单的角标就会自动更新，适用于大部分项目需求，提供详细示例源码。

微信小程序vue2和vue3版本都可以用，新手小白直接复制改下就能用了。

在这里插入图片描述

整体思路及流程

该功能

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 9
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
117.【微信小程序 - 01】
qq_69683957的博客
05-27 2387
微信小程序(一)、微信小程序概括1.微信小程序简介(1).小程序与普通网页开发的区别2.注册微信小程序账号(1).注册小程序账号(2).获取小程序的AppID3.安装微信开发者工具(1).微信开发者工具的简介:(2).微信开发者工具的下载4.创建第一个小程序(1).创建小程序步骤(2).开发者工具的功能介绍 ⭐(二)、微信小程序目录讲解1.小程序代码的目录构成(1).了解小程序的目录结构(2).小程序页面的组成文件2.四种JSON配置文件 ♻(1). app.json (全局配置文件)(2). peojec
微信小程序框架---视图层&逻辑层&API&事件
weixin_74268571的博客
10-16 684
小程序框架的详细介绍，视图层WXML、WXSS、WXS，逻辑层注册页面、页面路由，页面的生命周期，API和事件
微信小程序开发----1章~6章总结
weixin_74181869的博客
04-27 859
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法（|| ||）将变量或运算规则包起来。将模板定义后，就可以对其进行调用了。
微信小程序基础
黎小小的博客
12-05 1275
使用 name 属性，作为模板的名字。然后在内定义代码片段右击创建components创建自定义组件使用时：页面js文件中usingComponent中引入；wxml页面中引入组件注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。自定义组件名只能是小写字母、中划线和下划线的组合使用字段引入；自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。出于性能考虑，使用时，setData内容不会被直接深复，即后。
微信小程序 返回tabBar页面刷新控制
sunidd的博客
04-16 2972
tabBar中的某个页面是用来发布数据的，发布数据之前在tabBar中各页面切换时该页面（publish）已填数据不会丢失（该页面已填写数据需要保存）。发布数据后进入页面2（publishsuccess），显示发布成功，但是发布数据后再进入该tabBar的发布页面则需要清除数据。
最新微信小程序学习笔记（二）-- 开发之框架_微信小程序开发框架
2401_84302628的博客
05-02 787
​// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况})})},// 小程序启动，或从后台进入前台显示时触发},onHide() {// 小程序从前台进入后台时触发.},// 小程序发生脚本错误或 API 调用报错时触发},// 小程序要打开的页面不存在时触发;如果是 tabbar 页面，请使用 wx.switchTab - 404},
微信小程序自定义tabbar
热门推荐
sunqian
01-04 1万+
自己看了微信小程序，因为需要用到字体图标，所以需要自定义一个tabbar，自己学的来源于，网络上的一个热心博主的分享，这个是他原博客的连接 我是先创建了一个文件夹，相当于存放了tabbar组件，里面新建一系列的文件。 先简单讲下tabbar各个文件的内容。 tabbar.json内容 { "component": true, "usingComponents": {} } wxml...
微信小程序+uni-app知识点总结
liuliuhhxxttxs的博客
11-24 2206
对于一些独立的模块我们尽可能抽离出来，这是因为自定义组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用。
《微信小程序》入门小程序-商城小demo的实现
Oliver尹的博客
07-21 4185
前言 承接上一篇《入门小程序》，希望通过这个简单的商城demo可以更好的学习并理解微信小程序的开发； （PS：本文接口和图片资源来自于某位老师的网课，为了防止说打广告，因此不放链接了，布局和实现这两部分与课程不尽相同，虽然是学习但是学习还是要融入自己的思考才能有所收货，因此只能说最终效果是一致的）； 分析 在开始码代码前我个人习惯先分析一下接下来要做什么，理一下逻辑，同时看看有可能会涉及到哪些知识点，这样在准备阶段大致心里就有了一个底，对于重复度高的部分可以提前预计到并封装成组件，公共样式也尽量提前抽离，不
微信小程序在其他页面监听globalData中值的变化
10-16
主要给大家介绍了关于微信小程序如何在其他页面监听globalData中值的变化的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航-更新版（支持自由组合总数超过5个tabBar菜单）
01-03
2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。 4、本示例是7个底部导航，分2种权限，权限1显示1，2，3；权限2显示4，5...
uniapp - 微信小程序 - 自定义底部tabbar
06-26
在开发微信小程序或基于uniapp框架的应用时，自定义底部tabbar是一项常见的需求。底部tabbar作为用户界面的重要组成部分，通常包含多个图标和文字，用于切换不同的页面或功能区域。本篇文章将深入探讨如何在uniapp中...
源码uni-app 微信小程序根据角色动态的更改底部tabbar
03-24
1.包含小程序完整项目流程 2.两个角色切换登录 3.登录，登录记录，账号注册，选择公司，存取记录，授权名单，项目列表，盘点，盘点柜子，储物仓列表，我的等功能页面源码。
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航
11-01
内容概要： ...2、使用自定义底部导航 custom-tab-bar优雅实现微信小程序动态tabBar。 适合人群： 1、具备一定编程基础，熟悉小程序开发者 能学到什么： 1、使用自定义组件，完全接管 tabBar 的渲染。
基于STM32设计的盆栽种植自动管理系统(微信小程序)(201)
08-06 340
基于STM32设计的盆栽种植自动管理系统，通过集成多种传感器监测环境参数，结合WiFi联网功能和微信小程序远程控制，实现了对植物生长环境的自动化、精细化管理。用户可以随时随地查看当前的土壤含水量、环境温湿度、光照强度等信息，并根据实际需求设置相应的阈值以触发自动补水、灯光调节等功能。当环境条件超出设定范围时，系统能够立即通过蜂鸣器报警提醒用户，并采取相应措施调整环境条件，确保植物始终处于最佳生长状态。
微信小程序_对接腾讯实时音视频_多人会议
分享程序相关知识
08-02 898
如何对接腾讯实时音视频的多人会议产品，从开通服务到对接完成，一 一讲解。
微信小程序--详情实现日期选择期（年月日）
最新发布
weixin_51494148的博客
08-07 270
【代码】微信小程序--详情实现日期选择期（年月日）
AI智能名片微信小程序在社群运营中的价值与应用研究
专注MarTech应用研究与实施方案
08-07 370
1.1 定义与功能AI智能名片微信小程序是一种集成了人工智能技术的创新应用，它打破了传统名片的物理限制，将个人信息、企业介绍、产品展示、联系方式等多维度信息整合到一个数字化平台中。用户只需通过微信扫描二维码或搜索小程序名称，即可快速访问并分享自己的AI智能名片。此外，该小程序还提供了数据分析、智能推荐、即时通讯等增值服务，帮助企业或个人实现精准营销、用户管理、客户服务等目标。1.2 优势分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值