uniapp原生tabbar設置并添加數(shù)字角標或小紅點提示功能

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

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

普通用法

uni.showTabBarRedDot

uni.showTabBarRedDot({ //顯示紅點 
	index: 4 //tabbar下標
})

如下圖所示：

uni.setTabBarBadge

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

如下圖所示：

uni.removeTabBarBadge

uni.removeTabBarBadge({ //隱藏數(shù)字標
	index: 2 //tabbar下標
})

uni.hideTabBarRedDot

uni.hideTabBarRedDot({ //隱藏紅點
	index: 2 //tabbar下標
})

實際應用

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

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

注意事項

在頁面加載的時候調(diào)用。
支付寶開發(fā)者工具上面的紅點樣式比較丑，但是不用調(diào)整。真機調(diào)試樣式會準確些也相對好看。
加定時器的原因是因為頁面還沒計算清楚紅點個數(shù)就會往后運行，給計算紅點個數(shù)一點時間，這樣就不會導致紅點不顯示。（個人看法）

附：uniapp之設置小技巧

使用uniapp 通常會遇到進入詳情頁，需要修改標題文字，uniapp自帶的方法就可以修改代碼如下：

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

1.修改底部tabar

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

2.為 tabBar 某一項的右上角添加文本。

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

3.移除 tabBar 某一項右上角的文本。

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

僅僅是記錄以后好查詢，官方api 也可以查詢的

總結

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

您可能感興趣的文章:

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