uni-app 设置tabBar的setTabBarBadge购物车/消息等角标

目录

    • 一、效果
    • 二、代码实现
    • 二、全部代码
      • 1.index.vue
      • 2.cart.vue
    • 三、真实案例
    • 参考
    • 最后

一、效果

请添加图片描述

二、代码实现

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

主要代码:

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

二、全部代码

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

1.index.vue

首页页面

<script>export default {data() {return {tabBarNum: '' //底部消息数量}},onLoad() {this.footMsgFun()  //调用底部方法},onShow() {this.footMsgFun()  //调用底部方法},methods: {//底部:人脉红点显示footMsgFun() {var that = thisthis.$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>

2.cart.vue

购物车页面

<script>export default {data() {return {tabBarNum: '' //底部消息数量}},onLoad() {this.footMsgFun()  //调用底部方法},onShow() {this.footMsgFun()  //调用底部方法},methods: {//底部:人脉红点显示footMsgFun() {var that = thisthis.$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>

三、真实案例

		onLoad() {this.getCartData();},onShow() {this.getCartData();},mounted() {this.getCartData();},methods: {getCartData() {let self = this;self.isloadding = true;self._get('index/index', {url: self.url}, function(res) {self.cart_total_num = res.data.cart_total_num;if (self.cart_total_num > 0) {uni.setTabBarBadge({index: 3, text: String(self.cart_total_num), });} else { uni.removeTabBarBadge({index: 3 });}});},
}

参考

官网
参考使用这个大佬

大佬2

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

19-数据结构-查找-散列查找

目录 一、散列查找结构思路图 二、哈希函数 三、解决冲突 1.开放地址法 1.1.线性探测法&#xff08;线性探测再散列法&#xff09; 1.2.平方探测法&#xff08;二次探测再散列&#xff09; 1.3.再散列法&#xff08;双散列法&#xff09; 2.拉链法 2.1简介 四、散列查…

Python 自动化之批量处理文件(一)

批量新建目录、文档Pro版本 文章目录 批量新建目录、文档Pro版本前言一、做成什么样子二、基本思路1.引入库2.基本架构 三、用户输入模块四、数据处理模块1.excel表格数据获取2.批量数据的生成 总结 前言 我来写一个不一样的批量新建吧。在工作中&#xff0c;有些同学应该会遇…

mybatis的快速入门以及spring boot整合mybatis(二)

需要用到的SQL脚本&#xff1a; CREATE TABLE dept (id int unsigned PRIMARY KEY AUTO_INCREMENT COMMENT ID, 主键,name varchar(10) NOT NULL UNIQUE COMMENT 部门名称,create_time datetime DEFAULT NULL COMMENT 创建时间,update_time datetime DEFAULT NULL COMMENT 修改…

SpringBoot 实现 elasticsearch 查询操作(RestHighLevelClient 的案例实战)

文章目录 1. 环境准备1. 查询全部2. 根据 name 查询 match 分词查询3. 根据 name 和 品牌查询 multiMatch 分词查询4. 根据 brand 查询 match 分词查询5. 按照价格 范围查询6. 精确查询7. boolQuery8. 分页9. 高亮查询9. 公共解析 上一节讲述了 SpringBoot 实现 elasticsearch …

想考研到电子类,未来从事芯片设计,目前该怎么准备?

最近看不少天坑学子想考研微电子专业&#xff0c;但却不知道该怎么准备&#xff1f;接下来就带大家一起来具体了解一下~ 首先是目标院校的选择&#xff1f; 目前所设的微电子专业学校里&#xff0c;比较厉害的有北京大学、清华大学、中国科学院大学、复旦大学、上海交通大学、…

【华为鸿蒙系统学习】- HarmonyOS4.0开发工具和环境配置问题总结|自学篇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 官方链接 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 安装教程 &#xff08;…

应用密码学期末复习(3)

目录 第三章 现代密码学应用案例 3.1安全电子邮件方案 3.1.1 PGP产生的背景 3.2 PGP提供了一个安全电子邮件解决方案 3.2.1 PGP加密流程 3.2.2 PGP解密流程 3.2.3 PGP整合了对称加密和公钥加密的方案 3.3 PGP数字签名和Hash函数 3.4 公钥分发与认证——去中心化模型 …

【小沐学Python】Python实现语音识别(Whisper)

文章目录 1、简介1.1 whisper简介1.2 whisper模型 2、安装2.1 whisper2.2 pytorch2.3 ffmpeg 3、测试3.1 命令测试3.2 代码测试&#xff1a;识别声音文件3.3 代码测试&#xff1a;实时录音识别 4、工具4.1 WhisperDesktop4.2 Buzz4.3 Whisper-WebUI 结语 1、简介 https://gith…

C语言—每日选择题—Day45

第一题 1. 以下选项中&#xff0c;对基本类型相同的指针变量不能进行运算的运算符是&#xff08;&#xff09; A&#xff1a; B&#xff1a;- C&#xff1a; D&#xff1a; 答案及解析 A A&#xff1a;错误&#xff0c;指针不可以相加&#xff0c;因为指针相加可能发生越界&…

如何从eureka-server上进行服务发现,负载均衡远程调用服务

在spring cloud的maven的pom文件中添加eureka-client的依赖坐标 <!--eureka-client依赖--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-client</artifactId></dependen…

(第8天)保姆级 PL/SQL Developer 安装与配置

PL/SQL Developer 安装与配置(第8天) 咱们前面分享了很多 Oracle 数据库的安装,但是还没有正式使用过 Oracle 数据库,怎么连接 Oracle 数据库?今天就来讲讲我学习中比较常用的 Oracle 数据库连接工具:PL/SQL DEVELOPER。 PL/SQL Developer 的安装和配置对于新手来说还是…

命令行参数(C语言)

目录 什么是命令行参数 main函数的可执行参数 不传参打印 传参打印 IDE传参 cmd传参 命令行参数的应用&#xff08;文件拷贝&#xff09; 什么是命令行参数 概念&#xff1a;命令行参数指的是在运行可执行文件时提供给程序的额外输入信息。它们通常以字符串形式出现&am…

Navicat 技术指引 | 适用于 GaussDB 分布式的自动运行功能

Navicat Premium&#xff08;16.3.3 Windows 版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结…

集合03 Collection (List) - Java

List ArrayListArrayList注意事项ArrayList底层操作机制-源码分析&#xff08;重点&#xff09; VectorVector基本介绍 ——Vector和ArrayList比较Vector底层结构和源码分析 LinkedList基本介绍LinkedList的底层结构和操作机制LinkedList的增删改查 ——LinkedList和ArrayList比…

AI自动生成代码工具

AI自动生成代码工具是一种利用人工智能技术来辅助或自动化软件开发过程中的编码任务的工具。这些工具使用机器学习和自然语言处理等技术&#xff0c;根据开发者的需求生成相应的源代码。以下是一些常见的AI自动生成代码工具&#xff0c;希望对大家有所帮助。北京木奇移动技术有…

maui下sqlite演示增删改查

数据操作类 有分页 todoitemDatabase.cs&#xff1a; using SQLite; using TodoSQLite.Models;namespace TodoSQLite.Data {public class TodoItemDatabase{SQLiteAsyncConnection Database;public TodoItemDatabase(){}// 初始化数据库连接和表async Task Init(){if (Databa…

【MySQL】:数据类型

数据类型 一.数值类型1.整数1.tinyint2.bit类型 2.浮点类型1.float2.decimal 二.字符串类型1.char类型2.varchar类型3.char和varchar的区别4.日期和时间类型5.enum和set 三.集合查询 一.数值类型 1.整数 1.tinyint 正常插入 越界插入 如果我们向mysql特定的类型中插入不合法的…

三天精通Selenium Web 自动化 - Selenium(Java)环境搭建 (new)

0 背景 开发工具idea代码管理mavenjdk1.8webdriver chrome 1 chromedriver & chrome chromedriver和chrome要对应上&#xff1a; chomedriver下载地址&#xff1a;淘宝镜像 这里用的是 chromedriver88-0-4324-96.zipchrome下载地址&#xff1a;如何降级和安装旧版本的C…

环境安全之配置管理及配置安全设置指导

一、前言 IT运维过程中&#xff0c;配置的变更和管理是一件非常重要且必要的事&#xff0c;除了一般宏观层面的配置管理&#xff0c;还有应用配置参数的配置优化&#xff0c;本文手机整理常用应用组件配置项配置&#xff0c;尤其安全层面&#xff0c;以提供安全加固指导实践。…

MySQL之创建时间类型的字段表

mysql之创建时间类型的字段表 CREATE TABLE tab(birthday DATE, -- 生日job_time DATETIME, -- 记录年月日时分秒login_time TIMESTAMP -- 时间戳NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP )解释&#xff1a; NOT NULL DEFAULT &#xff1a;默认不为空…