【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点

news2024/11/18 14:36:26

一、实现的效果

在这里插入图片描述

功能描述:无论点击底部的哪个菜单栏,都可以看到第二个菜单栏下显示的红点通知。

如果只在人脉当前页面设置的话,当你在第二个菜单栏的页面中调用uni.setTabBarBadge方法设置红点后,切换到第一个菜单栏的页面时,是无法看到第二个菜单栏的红点的。

解决方法:如果希望在第一个菜单栏的页面中看到第二个菜单栏的红点,需要在第一个菜单栏的页面中手动调用uni.getTabBarBadge方法获取第二个菜单栏的红点状态,然后根据返回的结果来显示相应的红点。

二、代码实现

只要使用uni.setTabBarBadgeuni.removeTabBarBadge来进行对红点的设置和移除。

主要代码:

//设置红点
uni.setTabBarBadge({
	index: 1, // 底部菜单栏的索引(从0开始)
	text:'99', // 要显示的文本(必须是字符串类型)
});
//移除红点
uni.removeTabBarBadge({
	index: 1 // 底部菜单栏的索引(从0开始)
});

全部代码:

以下代码在人脉页面和首页都添加上,才能保证一进入小程序首页,可以直接看到人脉处有无红点。

<script>
	export default {
		data() {
			return {
				tabBarNum: '' //底部消息数量
			}
		},
		onLoad() {
			this.footMsgFun()  //调用底部方法
		},
		onShow() {
			this.footMsgFun()  //调用底部方法
		},
		methods: {
			//底部:人脉红点显示
			footMsgFun() {
				var that = this
				this.$api.appPlateForm('POST', this.$url.all_message, '', function(res) {
					if (res.code == '200') {
						//1.获取到接口里,消息的数量
						that.tabBarNum = res.data.num
						
						//2.关键代码:设置红点
						if (that.tabBarNum > 0) {//设置底部消息通知
							uni.setTabBarBadge({
								index: 1, // 人脉页面在底部菜单栏的索引
								text: String(that.tabBarNum), // 要显示的文本(必须是字符串类型)
							});
						} else {  //移除底部消息通知
							uni.removeTabBarBadge({
								index: 1 // 人脉页面在底部菜单栏的索引
							});
						}
					}
				})
			},
			
		}
	}
</script>

ok~到这里就完成啦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/729912.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣 332. 重新安排行程

题目来源&#xff1a;https://leetcode.cn/problems/reconstruct-itinerary/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a; 这道题目有几个难点&#xff1a; 一个行程中&#xff0c;如果航班处理不好容易变成一个圈&#xff0c;成为死循环。解决&am…

【论文基本功】【LaTeX】附录【IEEE论文】

注意&#xff1a;本博客使用的所有命令都需要以使用 IEEEtran 文档类为前提&#xff0c;即 tex 文件的第一行中的必须是 \documentclass[可选参数]{IEEEtran}&#xff08;可选参数部分可以自由选择&#xff0c;如 \documentclass[10pt,journal,compsoc]{IEEEtran}。&#xff09…

C++primer(第五版)第十三章(拷贝控制)

一个类通过定义五种特殊的成员函数来控制这些操作: 拷贝构造函数 拷贝赋值运算符 移动构造函数 移动赋值运算符 析构函数 13.1拷贝,赋值与销毁 13.1.1拷贝构造函数 如果一个构造函数的第一个参数是自身类型的引用(必须是引用类型!),并且没有其他参数或是其他参数都有默认值(即…

基于matlab检测使用校准的立体摄像头拍摄的视频中的人物并确定其与摄像头的距离(附源码)

一、前言 此示例演示如何检测使用校准的立体摄像头拍摄的视频中的人物&#xff0c;并确定他们与摄像头的距离。 二、加载立体摄像机的参数 加载对象&#xff0c;这是使用应用程序或函数校准相机的结果。 三、创建视频文件阅读器和视频播放器 创建用于读取和显示视频的系统对…

LabVIEW开发X射线图像增强

LabVIEW开发X射线图像增强 X射线图像在临床诊断中起着重要作用。但是&#xff0c;由于各种原因&#xff0c;例如不均匀&#xff0c;低照度条件和一些噪点&#xff0c;图像质量通常不是很好。因此有必要增强这些图像&#xff0c;以方便后续处理或诊断。模糊集论是开发图像处理中…

C# Color的名称对应该工具

工具效果如下图&#xff1a; 代码&#xff1a; namespace WinFormsColor {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void displayColor(){Control listControl this.Controls["listView_Color"];if (listControl ! null)…

mysql的一些练习题

1. 第1题 mysql> create database Market charset utf8; Query OK, 1 row affected (0.01 sec)第二题 mysql> use Market Database changed mysql> mysql> create table customers(-> c_num int(11) primary key auto_increment,-> c_name varchar(50),-&…

【自动化测试】

一、自动化测试定义 首先来说一下什么是软件测试&#xff1f; 软件测试简单来说就是在规定的条件下对程序进行操作以发现程序错误&#xff0c;衡量软件质量&#xff0c;并对其是否能满足设计要求进行评估的过程。 那么什么是自动化测试呢? 自动化测试是把以人为驱动的测试…

使用Jxbrowser7替换浏览器请求内容和header

前几天一个伙计让我帮他做jxbrowser的请求内容(requestBody&#xff0c;Header)的替换&#xff0c;特此记录。 通过官网文档查阅&#xff0c;我们可以通过BeforeSendUploadDataCallback和BeforeStartTransactionCallback来实现body和header的替换

MySQL之DQL(涵盖所有查询!!!)

文章目录 前言一、基础查询1.1 语法1.2 实例 二、条件查询2.1 语法2.2 条件查询实例2.3 模糊查询实例 三 、排序查询3.1 语法3.2 实例 四 、聚合函数4.1 概念4.2 聚合函数分类4.3 聚合函数语法4.4 实例 五、分组查询5.1 语法5.2 实例 六、分页查询6.1 语法6.2 实例 前言 在上一…

Docker 是什么,在 Ubuntu 虚拟机上安装(部署)Docker

本文目录 1. Docker 简介1.1 什么是 Docker1.2 Docker 与虚拟技术的区别和联系1.3 为什么要用 Docker 2. 几个基本概念2.1 镜像2.1.1 分层存储 2.2 容器2.3 仓库2.3.1 Docker Registry 公开服务2.3.2 私有 Docker Registry 3. Docker 安装3.1 卸载旧版本 Docker3.2 更新及安装工…

Visual Studio 2017下的C++开发环境搭建

Visual Studio 是Microsoft旗下的开发工具包系列产品&#xff0c;是一个基本完整的开发工具集&#xff0c;它包括整个软件生命周期中所需要的大部分工具&#xff0c;如UML工具、代码管控工具、集成开发环境(IDE)等等&#xff0c;是最流行的Windows平台应用程序的集成开发环境。…

动态规划之63 不同路径 II(第5道)

题目&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那…

ROS-Moveit和Gazebo联合仿真

文章目录 URDF功能包配置configlaunchCMakeLists.txtpackage.xmlurdf文件 Moveit功能包配置configlaunch 运行 URDF功能包配置 config 首先在SW2URDF生成的功能包下Config目录下新建文件joint_trajectory_controller.yaml robot_arm_controller:type: "position_contro…

Tomcat使用数据库连接池数据库

1.连接池技术的作用 数据池允许应用程序重复使用一个现有的数据库连接&#xff0c;而不是重新建立一个。这项技术能明显地提高对数据库操作的性能。 2.什么是连接池技术 数据库连接池在初始化时将创建一定数量的数据库连接&#xff0c;具体数量的由连接池的最小数据库连接数来设…

什么是Uniswap v3?

目录 1. 集中化流动性&#xff1a;2. 集中化资金池管理&#xff1a;3. 多个流动性池&#xff1a;4. 高级订单类型&#xff1a;5. 协议费用优化&#xff1a; Uniswap v3 是去中心化交易所 Uniswap 的第三个主要版本&#xff0c;它于2021年5月发布。相比于 Uniswap v2&#xff0c…

内嵌tomcat使用方式(读取web.xml)

pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http…

微信小程序之单选题按钮切换背景

先来效果图 未选效果 已选效果 上代码 <view class"questionClass">问题1&#xff1a;夜晚落地西安咯&#xff0c;你最想先去哪里看看呢&#xff1f;</view><view class"single"><ul class"box"><li v-for"(s,i…

Python获取豆丁文档数据内容, 保存word文档

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 开发环境: python 3.8 pycharm 模块使用: requests --> pip install requests re base64 docx --> pip install python-docx 第三方模块安装方法&#xff1a; win R 输入cmd 输入安装命令 pip install …

第N4周:使用Word2vec实现文本分类

目录 二、数据预处理1.加载数据2.构建词典3.生成数据批次和迭代器 二、模型构建1.搭建模型2.初始化模型3.定义训练与评估函数 三、训练模型1.拆分数据集并运行模型2.测试指定数据 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&…