一、實(shí)現(xiàn)的效果
功能描述：無(wú)論點(diǎn)擊底部的哪個(gè)菜單欄，都可以看到第二個(gè)菜單欄下顯示的紅點(diǎn)通知。
如果只在人脈當(dāng)前頁(yè)面設(shè)置的話，當(dāng)你在第二個(gè)菜單欄的頁(yè)面中調(diào)用uni.setTabBarBadge方法設(shè)置紅點(diǎn)后，切換到第一個(gè)菜單欄的頁(yè)面時(shí)，是無(wú)法看到第二個(gè)菜單欄的紅點(diǎn)的。
解決方法：如果希望在第一個(gè)菜單欄的頁(yè)面中看到第二個(gè)菜單欄的紅點(diǎn)，需要在第一個(gè)菜單欄的頁(yè)面中手動(dòng)調(diào)用uni.getTabBarBadge方法獲取第二個(gè)菜單欄的紅點(diǎn)狀態(tài)，然后根據(jù)返回的結(jié)果來(lái)顯示相應(yīng)的紅點(diǎn)。
二、代碼實(shí)現(xiàn)
只要使用uni.setTabBarBadge和uni.removeTabBarBadge來(lái)進(jìn)行對(duì)紅點(diǎn)的設(shè)置和移除。
主要代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-532834.html
//設(shè)置紅點(diǎn)
uni.setTabBarBadge({
index: 1, // 底部菜單欄的索引（從0開(kāi)始）
text:'99', // 要顯示的文本（必須是字符串類(lèi)型）
});
//移除紅點(diǎn)
uni.removeTabBarBadge({
index: 1 // 底部菜單欄的索引（從0開(kāi)始）
});
全部代碼：
以下代碼在人脈頁(yè)面和首頁(yè)都添加上，才能保證一進(jìn)入小程序首頁(yè)，可以直接看到人脈處有無(wú)紅點(diǎn)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-532834.html
<script>
export default {
data() {
return {
tabBarNum: '' //底部消息數(shù)量
}
},
onLoad() {
this.footMsgFun() //調(diào)用底部方法
},
onShow() {
this.footMsgFun() //調(diào)用底部方法
},
methods: {
//底部：人脈紅點(diǎn)顯示
footMsgFun() {
var that = this
this.$api.appPlateForm('POST', this.$url.all_message, '', function(res) {
if (res.code == '200') {
//1.獲取到接口里，消息的數(shù)量
that.tabBarNum = res.data.num
//2.關(guān)鍵代碼：設(shè)置紅點(diǎn)
if (that.tabBarNum > 0) {//設(shè)置底部消息通知
uni.setTabBarBadge({
index: 1, // 人脈頁(yè)面在底部菜單欄的索引
text: String(that.tabBarNum), // 要顯示的文本（必須是字符串類(lèi)型）
});
} else { //移除底部消息通知
uni.removeTabBarBadge({
index: 1 // 人脈頁(yè)面在底部菜單欄的索引
});
}
}
})
},
}
}
</script>
ok~到這里就完成啦!!!
到了這里，關(guān)于【底部消息紅點(diǎn)提示】uniapp開(kāi)發(fā)小程序時(shí)，使用uni.setTabBarBadge設(shè)置底部菜單的紅點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
