快捷導(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)的頁面中完成對消息的處理,如果有新消息,則在tabBar頁面中顯示紅點(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)

在頁面加載的時(shí)候調(diào)用。
支付寶開發(fā)者工具上面的紅點(diǎn)樣式比較丑，但是不用調(diào)整。真機(jī)調(diào)試樣式會(huì)準(zhǔn)確些也相對好看。
加定時(shí)器的原因是因?yàn)轫撁孢€沒計(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)入詳情頁，需要修改標(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右上角文字，由左到右依次
})

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

總結(jié)

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

您可能感興趣的文章: