微信小程序在Tab的icon上顯示消息數(shù)量的方法
在微信小程序中,可以在Tab的icon上顯示消息數(shù)量的方法如下:
首先,在app.json文件中,找到對(duì)應(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文件中,定義一個(gè)變量來保存消息數(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ū)嵗?,然后通過實(shí)例的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ù)量改變時(shí),只需調(diào)用全局函數(shù)更新消息數(shù)量即可。
到此這篇關(guān)于微信小程序如何在Tab的icon上顯示消息數(shù)量的文章就介紹到這了,更多相關(guān)微信小程序顯示消息數(shù)量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)漂亮的淡藍(lán)色滑動(dòng)門效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的淡藍(lán)色滑動(dòng)門效果代碼,涉及JavaScript通過自定義函數(shù)遍歷頁面元素及動(dòng)態(tài)設(shè)置元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12UniApp與WebView雙向通信及數(shù)據(jù)傳輸超詳細(xì)講解
這篇文章主要介紹了UniApp與WebView雙向通信及數(shù)據(jù)傳輸?shù)南嚓P(guān)資料,詳細(xì)講解了UniApp與WebView的通信原理、方法對(duì)比、數(shù)據(jù)傳輸實(shí)戰(zhàn)、調(diào)試技巧、性能優(yōu)化策略及技術(shù)風(fēng)險(xiǎn)控制,通過合理選型和優(yōu)化,需要的朋友可以參考下2025-04-04javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版,這里提供了兩個(gè)版本,第二個(gè)在firefox下運(yùn)行有些問題大家可以修改下,第一個(gè)的高度問題,已經(jīng)修正,其實(shí)就是簡(jiǎn)單的加了css樣式。2009-12-12JavaScrpt中如何使用 cookie 設(shè)置查看與刪除功能
這篇文章主要介紹了JavaScrpt中使用 cookie 設(shè)置查看與刪除功能的方法,文中通過實(shí)例代碼給大家介紹了js cookie常用的3個(gè)預(yù)設(shè)函數(shù)庫,需要的朋友可以參考下2017-07-07javascript:google 向上向下滾動(dòng)特效,兼容IE6,7,8,FF
這個(gè)代碼是我之前帶網(wǎng)上找的,因?yàn)榻裉煸俅斡玫?,所以記錄下來,免得以后都找不到,我現(xiàn)在想去搜它的說明文檔都搜不到!2010-08-08利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能
這篇文章主要介紹了利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04