使用uniapp设置tabbar的角标和移除tabbar的角标

使用场景描述

在一进入到小程序的时候就要将用户在购物车中添加的商品总数,要以角标的形式显示在tababr中。

代码实现

//index.vue<script setup>
import { onLoad } from '@dcloudio/uni-app'onLoad(()=>{uni.setTabBarBadge({index: 1,text: '5' //为了实现效果所随便写的数字,正式开发中从需要从后端或者本地进行获取})})
</script>

由于一进入到小程序的时候最先展示的为index.vue所以我在这个文件中设置的。

效果展示

 

uni.setTabBarBadge(OBJECT)介绍

作用

 为tabBar某一项的右上角添加文本。

平台差异

AppH5

微信小程序

支付宝

小程序

百度

小程序

抖音小程序
飞书小程序
QQ小程序快手小程序京东小程序

OBJECT参数说明

参数类型必填说明
indexNumbertabBar的哪一项,从左边算起,从0开始
textString显示的文本,不超过3个半角字符
successFunction×接口调用成功的回调函数
failFunction×接口调用失败的回调函数
completeFunction×接口调用结束的回调函数(成功、失败都会执行)

uni.removeTabBarBadge(OBJECT)介绍

作用

移除tabBar某一项右上角的文本。

平台差异说明

OBJECT参数说明

参数类型必填说明
indexNumbertabBar的哪一项,从左边算起,从0开始
successFunction×接口调用成功的回调函数
failFunction×接口调用失败的回调函数
completeFunction×接口调用结束的回调函数(成功、失败都会执行)

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

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

相关文章

计算机网络 —— 运输层(UDP和TCP)

计算机网络 —— 运输层&#xff08;UDP和TCP&#xff09; UDPTCPUDP和TCP的异同点相同点不同点 我们今天来看运输层的两个重要的协议——UDP和TCP UDP UDP&#xff0c;全称为用户数据报协议&#xff08;User Datagram Protocol&#xff09;&#xff0c;是互联网中一种核心的…

预告|博睿数据将受邀出席GOPS全球运维大会北京站!

GOPS全球运维大会作为国内外运维领域最具影响力的技术盛会之一&#xff0c;旨在汇聚全球运维精英&#xff0c;分享运维领域的前沿技术、实践经验与创新理念。6月28日&#xff0c;博睿数据&#xff08;bonree.com&#xff0c;股票代码688229&#xff09;将受邀出席第二十三届 GO…

【VUE】VUE安装包,怎么检查全部依赖包版本?

VUE安装包&#xff0c;怎么检查全部依赖包版本 edit 显示草稿 volume_up 检查Vue项目中所有依赖包的版本&#xff0c;可以使用以下工具和方法&#xff1a; 1. 使用npm命令 使用 npm ls 命令可以列出项目中所有已安装的依赖包及其版本。使用 npm list --depth1 命令可以列…

OpenCV查找图像中的轮廓并且展示

1、查找轮廓随机用不同的颜色画出 import cv2 import numpy as npdef get_contour_colors(num_contours):# 定义颜色表 (BGR 格式)colors [(255, 0, 0),(255, 50, 0),(255, 100, 0),(255, 150, 0),(255, 200, 0),(255, 255, 0),(200, 255, 0),(150, 255, 0),(100, 255, 0),(5…

【笔记】APN设置中ApnEditor在新建和编辑的代码实现差异

问题 新增和编辑APN都是使用ApnEditorActivity&#xff0c;但是进入的方式不同&#xff0c;如果APN做成插件的话&#xff0c;点击添加按钮的时候会提示“选择要使用的应用”&#xff0c;因为Settings本身也有这个界面被安装进去了 。 新增功能通过Intent.ACTION_INSERT跳转界…

App推广效果分析,Xinstall助力精准优化

App推广效果分析&#xff1a;Xinstall助力精准优化 在App推广的激烈竞争中&#xff0c;如何确保每一次推广活动都能带来最佳效果&#xff0c;是每个运营者都关心的问题。Xinstall作为一款专业的App推广工具&#xff0c;不仅提供了全方位的推广支持&#xff0c;还能通过精准的数…

毕业年薪20w起!25届最近5年南京信息工程大学自动化考研院校分析

南京信息工程大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近4年考研分数情况 四、近4年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、…

SortTable.js + vxe-table 实现多条批量排序

环境: vue3+vxe-table+sorttable.js 功能: 实现表格拖动排序,支持单条排序,多条排序 实现思路: sorttable.js官网只有单条排序的例子,网上也都是简单的使用,想要实现多条排序,就要结合着表格的复选框功能,在对其勾选的行统一计算! 最终效果: 实现代码 <template>…

机器学习的分类

机器学习分类 ​ 机器学习是人工智能的一个分支&#xff0c;它使计算机系统能够从数据中学习并做出决策或预测。机器学习&#xff08;Machine Learning&#xff09;是一种基于数据驱动的方法&#xff0c;旨在通过自动化的统计模型和算法从数据中学习和提取模式&#xff0c;以进…

PCIE的吞吐量如何计算和记忆诀窍?

简介&#xff1a; PCIe标准中的性能参数有好几个&#xff0c;比如设备的带宽和吞吐量是多少&#xff1f;传输速率&#xff1f; 百度百科上&#xff0c;PCIE标准的传输速率与带宽对应表如下&#xff08;表中速率为单向速率&#xff09;。网上有些数据是双向的&#xff0c;性能数…

2024面试自动化测试面试题【含答案+文档】

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、你做了几年的测试、自动化测试&#xff0c;说一下 selenium 的原理是什么&#xff1f; 我做了五年的测试&#xff0c;1年的自动化测试&#xff1b; selenium …

怎么把日常的文件做二维码?适用excel、word、pdf制作二维码的方法

文件转换成二维码是将文件转成一个链接&#xff0c;将链接做成二维码之后&#xff0c;扫码就可以访问该链接中的文件内容&#xff0c;通过这种方式来实现文件的快速分享。将文件生成二维码能够随时修改内容&#xff0c;可以更新替换当前文件&#xff0c;不断的通过一个二维码来…

【开发环境】PX4无人机实物使用视觉或运动捕捉系统进行位置估计

PX4无人机实物使用视觉或运动捕捉系统进行位置估计 PX4中关于外部位置信息的MAVLink话题参考坐标系EKF2调整配置参数调整EKF2_EV_DELAY参数 与ROS共同使用将OptiTrack MoCap系统提供的姿态数据导入ROSMotive MoCap软件的步骤将姿态数据导入ROS重新映射姿态数据 将姿态数据转发到…

DeepSORT(目标跟踪算法)中的状态向量与状态转移矩阵

DeepSORT&#xff08;目标跟踪算法&#xff09;中的状态向量与状态转移矩阵 flyfish 状态转移矩阵&#xff08;State Transition Matrix&#xff09;F的构造 这篇是一定要看的&#xff0c;拖到文章的最后部分&#xff0c;需要理解状态转移矩阵怎么来的&#xff0c;怎么是这个…

如何让 uboot启动时自动执行指令?(执行“mtdparts default”命令)

让uboot启动时自动设置分区&#xff08;执行“mtdparts default”命令&#xff09;&#xff0c;在uboot进入main_loop()死循环之前添加执行命令代码 run_command("mtdparts default", 0); #define MTDIDS_DEFAULT "nand0mini2440-nand" #define MTD…

Solr7.4.0报错org.apache.solr.common.SolrException

文章目录 org.apache.solr.common.SolrException: Exception writing document id MATERIAL-99598435990497269125316 to the index; possible analysis error: cannot change DocValues type from NUMERIC to SORTED_NUMERIC for field "opt_time"Exception writing…

无法在地址[localhost]和端口[8005]上创建服务器关闭套接字(基本端口[8005]和偏移量[0])

今天小伙伴问我一个问题&#xff0c;说是新服务器启动应用&#xff0c;报了一个错误&#xff0c;如下&#xff1a; 一开始我怀疑是端口被占用 经过排查端口没有被占用&#xff0c;然后我怀疑localhost解析有问题 经过 ping localhost 后&#xff0c;得到以下结果到这里很明…

场外期权能不能开户?场外期权在哪里开?

今天带你了解场外期权能不能开户&#xff1f;场外期权在哪里开&#xff1f;近年来&#xff0c;场外期权交易在金融市场上逐渐盛行起来。有许多人对于场外期权的开户问题感到困惑。 场外期权能不能开户&#xff1f; 资质要求&#xff1a; 个人投资者需要具备一定的金融知识和投…

(三十九)Vue之集中式的状态管理机制Vuex

目录 概念vuex的核心概念State&#xff08;状态&#xff09;Getters&#xff08;获取器&#xff09;Mutations&#xff08;突变&#xff09;Actions&#xff08;动作&#xff09; 搭建vuex环境基本使用getters的使用 上一篇&#xff1a;&#xff08;三十八&#xff09;Vue之插槽…

ASCII码表介绍

一、ASCII码是什么 ASCII&#xff08;American Standard Code for Information Interchange&#xff0c;美国信息交换标准代码&#xff09;是基于拉丁字母的一套电脑编码系统。它可分为基于7位二进制数的标准版本和基于8位二进制数的扩展版本&#xff0c;标准版本主要用于显示现…