tab栏圆点按钮_uniapp tabbar上的小圆点

需求

在tabbar的图标右侧显示和隐藏小圆点。一般表示有新消息、新更新。

基本代码

序号从0开始计算。

uni.showTabBarRedDot({index:1});

uni.hideTabBarRedDot({index:1});

修改代码

App.vue或index页

在App.vue的onLaunch周期或者是index页的onLoad加入代码,判定是否需要显示红点。

如果index页跟消息完全无关,那么尽量写在App.vue而不要写在index页。为啥?因为uni.showTabBarRedDot({index:1});跟具体页面的data和业务逻辑无关,跟index页也没有必然关系,而且消息页往往是第2个或第3个tabbar页,并不是index页。如果index页右上角也要加个新消息红点,那么当然要加在index页。

现在,在onLaunch(或index页的onLoad)加代码有2种做法,我们假设除了请求新消息,还有一些其他的请求有必要放到onLaunch(或index页的onLoad)里,这里一并讨论。

第一种做法,先判断会员是否登录(下面两项并发执行):

Promise.all(若干个影响UI布局的访客请求) -> Promise.all(若干个不影响UI布局的访客请求)

isLogin() -> yes -> Promise.all(若干个影响UI布局的会员请求) -> Promise.all(若干个不影响UI布局的会员请求) -> 新消息请求的回调:确定显示或不显示红点

第二种,不判断是否登录(下面两项并发执行):

Promise.all(若干个影响UI布局的访客请求) -> Promise.all(若干个不影响UI布局的访客请求)

Promise.all(若干个影响UI布局的会员请求) -> Promise.all(若干个不影响UI布局的会员请求) -> 新消息请求的回调:确定显示或不显示红点

如果不判断是否登录,则可能登录过期,这就导致,首先,浪费了线程和流量去请求数据,其次,如果axios拦截器设定拦截401错误并跳转到登录页,那么,上述的若干个影响UI布局的会员请求就必须加入拦截器里的白名单,也就是说,必须保证它们即使401也不跳转到登录页。

你的项目具体用哪种做法,都行。

处理登入、登出代码的success回调

登入代码的success回调里需同样请求一遍新消息数量,这回一定能请求到,不会fail,不多说。

登出代码的success里直接无脑隐藏红点。

可能改变红点的页面

在任何可能改变红点的代码的末尾都要加上判定,确定是否显示红点。

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

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

相关文章

Android OpenGLES2.0(一)OpenGLES2.0基础介绍

文章目录什么是OpenGL ES?OpenGL ES可以做什么?OpenGL ES版本及Android支持情况OpenGL ES 2.0的优点OpenGL ES 2.0中基本概念顶点着色器片元着色器着色器语言坐标系图形的绘制投影光照纹理映射其它OpenGL ES 2.0过程及理解什么是OpenGL ES? O…

如何 方法内指令重排 进制_谈谈指令重排

这个知识点也是很多人说不清道不明的地方,感觉都知道,说又说不出来。为什么会这样呢?因为这几个字,很容易被当成动词去理解,其实正确的理解是当成名词,即指令重排现象。那什么时候会产生指令重排现象呢&…

Windows ‘ls‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件

文章目录前言原因解决办法前言 Windows和mac混用或Windows与linux混用的情况下,在windows dos窗口随手一个ls,出现了 ‘ls’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 原因 ls是linux的命令,不是windows的命令,win…

python问题解决了吗_Python 问题怎么解决?

展开全部主要问题和解决方法如下:中文路径的问题:在D盘下保32313133353236313431303231363533e58685e5aeb931333365633939存一个名字为‘中文.txt‘的文件。运行如下测试代码:# -*- coding: utf-8 -*-fopen(D:\\中文.txt, r)print f.read()&a…

Linux ls 命令使用介绍

文章目录命令格式命令功能常用参数常用示例示例1 列出文件夹下的所有文件和目录的详细资料示例2 列出当前目录中所有以“t”开头的目录的详细内容,示例3 只列出文件下的子目录命令:示例4 列出目前工作目录下所有名称是以s开头的档案,越新的排…

exls导入数据库 php_PHP读取excel文件并导入数据库

PHPExcel是一个PHP类库,用来帮助我们简单、高效实现从Excel读取Excel的数据和导出数据到Excel。下面是PHPExcel读取的使用教程:1.首先下载PHPExcel2.下载好文件,解压可以得到如下文件:为了使用方便,我们可以在根目录创…

Linux cd 命令使用介绍

文章目录1. 命令格式2. 命令功能3. 常用范例示例1:进入系统根目录cd /2:使用 cd 命令进入当前用户主目录3:跳转到指定目录4:返回进入此目录之前所在的目录5:把上个命令的参数作为cd参数Linux cd 命令是Linux中最基本的…

netty冲突 play sbt_《Netty官方文档》本地传输接口

原文链接 译者:gm777自4.016版本以来, Netty提供了本地的socket传输使Linux系统可以使用JNI(JAVA本地接口)。这个传输接口不仅有着高性能并且产生更少的垃圾,所以你也许会想尝试使用一下。使用本地传输接口由于这个本地传输接口是与NIO传输接…

Linux pwd 命令使用介绍

文章目录1.命令格式2.命令功能3.常用参数4.常用实例实例1:用 pwd 命令查看默认工作目录的完整路径实例2:使用 pwd 命令查看指定文件夹Linux中用 pwd 命令来查看”当前工作目录“的完整路径。每当我们在终端…

java参数传入泛型类型_Java泛型参数界定到任何一个类型的范围

是否有一种语法或解决方法来将泛型类型参数限制为任何一种类型的类型?我知道您可以将类型限制为所有类型的所有类型(即AND逻辑):public class MyClass & Serializable> { } // legal syntax有OR逻辑版本,就是这样的:public class MyCl…

Linux mkdir 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.命令实例实例1:创建一个空目录实例2:递归创建多个目录或一次创建多级目录实例3:创建权限为777的目录实例4:创建新目录都显示信息实例5&…

jmeter修改redis_jmeter如何访问redis服务缓存

Redis(REmote DIctionary Server)是一个开源的内存数据结构存储,用作数据库,缓存和消息代理。作为内存数据库,它将所有数据保存在RAM中。Redis在读取/写入数据时实现高性能,并且在您需要确保在所有测试服务器上使用唯一数据时也很…

Linux rm/rmdir 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.命令实例1. 删除文件,系统会先询问是否删除。2. 强行删除文件,系统不再提示3. 删除任何.txt文件;删除前逐一询问确认4. 将目录及子目录中所有档案删除…

window服务器cpu过高的排查_线上服务器发生CPU占用率过高应该如何排查并定位问题?...

国外开发者平台 HankerRank 发布的 2018 年开发者技能调查报告中有一项关于"雇主最看重哪些核心能力"的调查,结果显示如下:排名前几的比较受重视的能力分别为:解决问题、编程语言熟练程度、Debug、系统设计和性能优化。解决问题的能…

Linux mv 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.命令实例1、文件改名( 重命名)2、移动文件3、将test目录下的文件text1.txt text2.txt text3.txt移动到目录mv中。4、将文件file1改名为file2,如果file…

Linux touch 命令使用介绍

文章目录1.命令格式2.命令参数3.命令功能4.使用范例1、创建不存在的文件,用法如下2、更新text.txt 的时间和text3.txt时间戳相同3、设定文件的时间戳-t time 格式详细说明linux中的touch命令一般用来修改文件时间戳&am…

qt怎么可以随意设置自己想要的表格_【Qt开发】QTableWidget的详细设置

在使用Qt不多的日子里,已经两次用到了QTableWidget这个控件,也慢慢的习惯和喜欢上了它。再使用QTableWidget的时候,已不像刚开始使用时的迷茫。嗯嗯。现在就来总结总结我与QTableWidget相识的历程......(*^__^*) 嘻嘻……使用时也查过不少资料…

Linux cat 命令使用介绍

文章目录1.命令格式2.命令功能3.命令参数4.使用实例1、输出两个文件的合并内容并显示行号2、两个文件合并内容并增加行号(空白行不加)之后将内容写到其他文件3、使用here doc来生成文件并向文件中输入内容,EOF输入可以…

thinkpad重装系统不引导_Thinkpad笔记本重装系统时无法UEFI启动进入PE怎么办

Thinkpad笔记本重装系统时无法UEFI启动进入PE怎么办?近日,有用户想要在Thinkpad笔记本中重装操作系统,但是发现无法UEFI启动并进入PE系统。如果想要通过PE进行Thinkpad笔记本系统重装操作的话,那么应该如何解决上述的问题呢?下面&#xff0…

Linux nl 命令使用介绍

文章目录1.命令格式2.命令参数3.命令功能4.使用例子1.用 nl 列出文件的内容2.nl 列出文件内容,空本行也加上行号3.让行号前面自动补上0,统一输出格式前面对cat做了介绍,现在继续介绍和cat有点类似的另外一个…