欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年08月04日 11:13:53   作者：海鷗兩三  
這篇文章主要給大家介紹了關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的相關(guān)資料,在相應(yīng)的頁面中完成對消息的處理,如果有新消息,則在tabBar頁面中顯示紅點(diǎn)提醒用戶,需要的朋友可以參考下

UNIAPP原生TABBAR設(shè)置并添加數(shù)字角標(biāo)或小紅點(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)

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

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

使用uniapp 通常會遇到進(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,//刪除某個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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼

    JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼

    這篇文章主要介紹了JavaScript屏蔽Backspace鍵的實(shí)現(xiàn)代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2017-11-11
  • Canvas實(shí)現(xiàn)動態(tài)粒子文字效果的代碼示例

    Canvas實(shí)現(xiàn)動態(tài)粒子文字效果的代碼示例

    這篇文章主要介紹了如何用Canvas實(shí)現(xiàn)動態(tài)粒子文字效果,文中有完整的代碼示例,文章通過代碼介紹的非常清楚,感興趣的小伙伴跟著小編一起來看看吧
    2023-08-08
  • JavaScript中async await更優(yōu)雅的錯誤處理方式

    JavaScript中async await更優(yōu)雅的錯誤處理方式

    async/await中的異常處理很讓人混亂,盡管有很多種方式來應(yīng)對async 函數(shù)的異常,但是連經(jīng)驗(yàn)豐富的開發(fā)者有時候也會搞錯,所以這篇文章主要給大家介紹了關(guān)于JavaScript中async await更優(yōu)雅的錯誤處理方式的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 原生JavaScript實(shí)現(xiàn)動態(tài)省市縣三級聯(lián)動下拉框菜單實(shí)例代碼

    原生JavaScript實(shí)現(xiàn)動態(tài)省市縣三級聯(lián)動下拉框菜單實(shí)例代碼

    像平時購物選擇地址時一樣，通過選擇的省動態(tài)加載城市列表，通過選擇的城市動態(tài)加載縣區(qū)列表，從而可以實(shí)現(xiàn)省市縣的三級聯(lián)動，下面使用原生的JavaScript來實(shí)現(xiàn)這個功能，需要的朋友參考下吧
    2016-02-02
  • TypeScript中l(wèi)et和var的區(qū)別介紹

    TypeScript中l(wèi)et和var的區(qū)別介紹

    這篇文章主要介紹了TypeScript?let與var的區(qū)別,主要從作用域等這幾個方面做詳細(xì)介紹，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-07-07
  • JavaScript迭代器與生成器使用詳解

    JavaScript迭代器與生成器使用詳解

    迭代器是一個統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可以被便捷的訪問，它是通過一個鍵為Symbol.iterator的方法來實(shí)現(xiàn)，這篇文章主要介紹了ES6 中的迭代器和生成器,需要的朋友可以參考下
    2022-11-11
  • JS中的reduce()方法使用小結(jié)

    JS中的reduce()方法使用小結(jié)

    這篇文章主要介紹了JS中的reduce()方法使用小結(jié),文章通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-08-08
  • 淺談JavaScript中的this指針和引用知識

    淺談JavaScript中的this指針和引用知識

    this是javascript的一個關(guān)鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調(diào)用函數(shù)的那個對象。接下來通過本文給大家介紹js中的this指針和引用，非常不錯，需要的朋友參考下
    2016-08-08
  • 20個拿來就能用的JavaScript技巧分享

    20個拿來就能用的JavaScript技巧分享

    這篇文章主要來和大家一起探討一下20?種?JavaScript?技巧和竅門,每種技巧和竅門都有通俗易懂的示例,讓我們一起來提升你的?JavaScript?技能吧
    2023-10-10
  • Webwork 實(shí)現(xiàn)文件上傳下載代碼詳解

    Webwork 實(shí)現(xiàn)文件上傳下載代碼詳解

    WebWork 當(dāng)然也提供了很友好的攔截器來實(shí)現(xiàn)對文件的上傳，讓我們可以專注與業(yè)務(wù)邏輯的設(shè)計(jì)和實(shí)現(xiàn)，在實(shí)現(xiàn)上傳和下載時順便關(guān)注了下框架上傳下載的實(shí)現(xiàn)
    2016-02-02

最新評論