微信小程序在Tab的icon上顯示消息數(shù)量的方法
更新時間：2024年08月10日 16:29:28 作者：liyu.info
這篇文章主要介紹了微信小程序在Tab的icon上顯示消息數(shù)量的方法,首先,在app.json文件中,找到對應(yīng)的tabBar配置,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
在微信小程序中，可以在Tab的icon上顯示消息數(shù)量的方法如下：
首先，在app.json文件中，找到對應(yīng)的tabBar配置，例如：
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/icon_home.png",
"selectedIconPath": "images/icon_home_selected.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/icon_message.png",
"selectedIconPath": "images/icon_message_selected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/icon_mine.png",
"selectedIconPath": "images/icon_mine_selected.png"
}
]
}在消息頁面的js文件中，定義一個變量來保存消息數(shù)量，例如：
Page({
data: {
messageCount: 0
},
// 其他代碼
})在消息頁面的wxml文件中，將變量綁定到icon上，例如：
<image class="icon" src="../../images/icon_message.png"></image>
<view class="count">{{messageCount}}</view>在app.js文件中，使用getApp()方法獲取小程序?qū)嵗缓笸ㄟ^實例的setData()方法更新消息數(shù)量，例如：
var app = getApp();
app.globalData.messageCount = 5;
app.globalData.messageCallback = function(messageCount) {
// 更新消息數(shù)量
this.setData({
messageCount: messageCount
});
};在其他頁面中，可以通過調(diào)用app.js中的全局函數(shù)來更新消息數(shù)量，例如：
var app = getApp(); app.globalData.messageCount = 10; app.globalData.messageCallback && app.globalData.messageCallback(app.globalData.messageCount);
在消息頁面的onShow()方法中，調(diào)用全局函數(shù)來更新消息數(shù)量，例如：
onShow: function() {
var app = getApp();
app.globalData.messageCallback && app.globalData.messageCallback(app.globalData.messageCount);
},通過以上步驟，就可以在Tab的icon上顯示消息數(shù)量了。當(dāng)消息數(shù)量改變時，只需調(diào)用全局函數(shù)更新消息數(shù)量即可。
到此這篇關(guān)于微信小程序如何在Tab的icon上顯示消息數(shù)量的文章就介紹到這了,更多相關(guān)微信小程序顯示消息數(shù)量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)漂亮的淡藍(lán)色滑動門效果代碼,涉及JavaScript通過自定義函數(shù)遍歷頁面元素及動態(tài)設(shè)置元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)下拉框二級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
UniApp與WebView雙向通信及數(shù)據(jù)傳輸超詳細(xì)講解
這篇文章主要介紹了UniApp與WebView雙向通信及數(shù)據(jù)傳輸?shù)南嚓P(guān)資料,詳細(xì)講解了UniApp與WebView的通信原理、方法對比、數(shù)據(jù)傳輸實戰(zhàn)、調(diào)試技巧、性能優(yōu)化策略及技術(shù)風(fēng)險控制,通過合理選型和優(yōu)化,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了如何判斷元素是否為HTMLElement元素。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
javascript 文字上下間隔滾動的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版，這里提供了兩個版本，第二個在firefox下運行有些問題大家可以修改下，第一個的高度問題，已經(jīng)修正，其實就是簡單的加了css樣式。2009-12-12
JavaScrpt中如何使用 cookie 設(shè)置查看與刪除功能
這篇文章主要介紹了JavaScrpt中使用 cookie 設(shè)置查看與刪除功能的方法，文中通過實例代碼給大家介紹了js cookie常用的3個預(yù)設(shè)函數(shù)庫,需要的朋友可以參考下2017-07-07
javascript:google 向上向下滾動特效,兼容IE6,7,8,FF
這個代碼是我之前帶網(wǎng)上找的，因為今天再次用到，所以記錄下來，免得以后都找不到，我現(xiàn)在想去搜它的說明文檔都搜不到！2010-08-08
利用Bootstrap Multiselect實現(xiàn)下拉框多選功能
這篇文章主要介紹了利用Bootstrap Multiselect實現(xiàn)下拉框多選功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本篇文章主要介紹了深入理解ES6的迭代器與生成器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了bootstrap輪播圖示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05