快捷導(dǎo)航

uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能

更新時(shí)間：2023年08月04日 11:13:53 作者：海鷗兩三

這篇文章主要給大家介紹了關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的相關(guān)資料,在相應(yīng)的頁(yè)面中完成對(duì)消息的處理,如果有新消息,則在tabBar頁(yè)面中顯示紅點(diǎn)提醒用戶,需要的朋友可以參考下

普通用法

uni.showTabBarRedDot

uni.showTabBarRedDot({ //顯示紅點(diǎn) 
	index: 4 //tabbar下標(biāo)
})

如下圖所示：

uni.setTabBarBadge

uni.setTabBarBadge({ //顯示數(shù)字  
	index: 4, //tabbar下標(biāo)
	text: '6' //數(shù)字
})

如下圖所示：

uni.removeTabBarBadge

uni.removeTabBarBadge({ //隱藏?cái)?shù)字標(biāo)
	index: 2 //tabbar下標(biāo)
})

uni.hideTabBarRedDot

uni.hideTabBarRedDot({ //隱藏紅點(diǎn)
	index: 2 //tabbar下標(biāo)
})

實(shí)際應(yīng)用

在我的界面如果有待用戶閱讀條數(shù)大于0，則在該tabbar(我的)頂部顯示小紅點(diǎn)。

onshow(){
 setTimeout(() => {
	th.allRedDot = 所有待閱讀數(shù)量相加
	if (th.allRedDot > 0) {
		uni.showTabBarRedDot({ //顯示紅點(diǎn) 
			index: 4 //tabbar下標(biāo)
		})
	}			
 }, 1000)
}

注意事項(xiàng)

在頁(yè)面加載的時(shí)候調(diào)用。
支付寶開(kāi)發(fā)者工具上面的紅點(diǎn)樣式比較丑，但是不用調(diào)整。真機(jī)調(diào)試樣式會(huì)準(zhǔn)確些也相對(duì)好看。
加定時(shí)器的原因是因?yàn)轫?yè)面還沒(méi)計(jì)算清楚紅點(diǎn)個(gè)數(shù)就會(huì)往后運(yùn)行，給計(jì)算紅點(diǎn)個(gè)數(shù)一點(diǎn)時(shí)間，這樣就不會(huì)導(dǎo)致紅點(diǎn)不顯示。（個(gè)人看法）

附：uniapp之設(shè)置小技巧

使用uniapp 通常會(huì)遇到進(jìn)入詳情頁(yè)，需要修改標(biāo)題文字，uniapp自帶的方法就可以修改代碼如下：

uni.setNavigationBarTitle({
            title:this.i18n.user.title
        });

1.修改底部tabar

uni.setTabBarItem({
            index: 0,
            text: this.i18n.tabs.home
        });

2.為 tabBar 某一項(xiàng)的右上角添加文本。

uni.setTabBarBadge({
  index: 0,
  text: '1'
})

3.移除 tabBar 某一項(xiàng)右上角的文本。

uni.setTabBarBadge({
  index: 0,//刪除某個(gè)tabar右上角文字，由左到右依次
})

僅僅是記錄以后好查詢(xún)，官方api 也可以查詢(xún)的

總結(jié)

到此這篇關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的文章就介紹到這了,更多相關(guān)uniapp tabbar設(shè)置數(shù)字角標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-11-11
Canvas實(shí)現(xiàn)動(dòng)態(tài)粒子文字效果的代碼示例
這篇文章主要介紹了如何用Canvas實(shí)現(xiàn)動(dòng)態(tài)粒子文字效果,文中有完整的代碼示例,文章通過(guò)代碼介紹的非常清楚,感興趣的小伙伴跟著小編一起來(lái)看看吧
2023-08-08
JavaScript中async await更優(yōu)雅的錯(cuò)誤處理方式
async/await中的異常處理很讓人混亂,盡管有很多種方式來(lái)應(yīng)對(duì)async 函數(shù)的異常,但是連經(jīng)驗(yàn)豐富的開(kāi)發(fā)者有時(shí)候也會(huì)搞錯(cuò),所以這篇文章主要給大家介紹了關(guān)于JavaScript中async await更優(yōu)雅的錯(cuò)誤處理方式的相關(guān)資料,需要的朋友可以參考下
2021-09-09
原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購(gòu)物選擇地址時(shí)一樣，通過(guò)選擇的省動(dòng)態(tài)加載城市列表，通過(guò)選擇的城市動(dòng)態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng)，下面使用原生的JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友參考下吧
2016-02-02
TypeScript中l(wèi)et和var的區(qū)別介紹
這篇文章主要介紹了TypeScript?let與var的區(qū)別,主要從作用域等這幾個(gè)方面做詳細(xì)介紹，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07
JavaScript迭代器與生成器使用詳解
迭代器是一個(gè)統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可以被便捷的訪問(wèn)，它是通過(guò)一個(gè)鍵為Symbol.iterator的方法來(lái)實(shí)現(xiàn)，這篇文章主要介紹了ES6 中的迭代器和生成器,需要的朋友可以參考下
2022-11-11
JS中的reduce()方法使用小結(jié)
這篇文章主要介紹了JS中的reduce()方法使用小結(jié),文章通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-08-08
淺談JavaScript中的this指針和引用知識(shí)
this是javascript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。但是總有一個(gè)原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。接下來(lái)通過(guò)本文給大家介紹js中的this指針和引用，非常不錯(cuò)，需要的朋友參考下
2016-08-08
20個(gè)拿來(lái)就能用的JavaScript技巧分享
這篇文章主要來(lái)和大家一起探討一下20?種?JavaScript?技巧和竅門(mén),每種技巧和竅門(mén)都有通俗易懂的示例,讓我們一起來(lái)提升你的?JavaScript?技能吧
2023-10-10
Webwork 實(shí)現(xiàn)文件上傳下載代碼詳解
WebWork 當(dāng)然也提供了很友好的攔截器來(lái)實(shí)現(xiàn)對(duì)文件的上傳，讓我們可以專(zhuān)注與業(yè)務(wù)邏輯的設(shè)計(jì)和實(shí)現(xiàn)，在實(shí)現(xiàn)上傳和下載時(shí)順便關(guān)注了下框架上傳下載的實(shí)現(xiàn)
2016-02-02