快捷導(dǎo)航

微信小程序在Tab的icon上顯示消息數(shù)量的方法

更新時(shí)間：2024年08月10日 16:29:28 作者：liyu.info

這篇文章主要介紹了微信小程序在Tab的icon上顯示消息數(shù)量的方法,首先,在app.json文件中,找到對(duì)應(yīng)的tabBar配置,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

在微信小程序中，可以在Tab的icon上顯示消息數(shù)量的方法如下：

首先，在app.json文件中，找到對(duì)應(yīng)的tabBar配置，例如：

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首頁(yè)",
      "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"
    }
  ]
}

在消息頁(yè)面的js文件中，定義一個(gè)變量來(lái)保存消息數(shù)量，例如：

Page({
  data: {
    messageCount: 0
  },
  // 其他代碼
})

在消息頁(yè)面的wxml文件中，將變量綁定到icon上，例如：

<image class="icon" src="../../images/icon_message.png"></image>
<view class="count">{{messageCount}}</view>

在app.js文件中，使用getApp()方法獲取小程序?qū)嵗?，然后通過(guò)實(shí)例的setData()方法更新消息數(shù)量，例如：

var app = getApp();
app.globalData.messageCount = 5;
app.globalData.messageCallback = function(messageCount) {
  // 更新消息數(shù)量
  this.setData({
    messageCount: messageCount
  });
};

在其他頁(yè)面中，可以通過(guò)調(diào)用app.js中的全局函數(shù)來(lái)更新消息數(shù)量，例如：

var app = getApp();
app.globalData.messageCount = 10;
app.globalData.messageCallback && app.globalData.messageCallback(app.globalData.messageCount);

在消息頁(yè)面的onShow()方法中，調(diào)用全局函數(shù)來(lái)更新消息數(shù)量，例如：

onShow: function() {
  var app = getApp();
  app.globalData.messageCallback && app.globalData.messageCallback(app.globalData.messageCount);
},

通過(guò)以上步驟，就可以在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)文章

發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。用JavaScript寫(xiě)的
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。用JavaScript寫(xiě)的...
2007-04-04
JavaScript實(shí)現(xiàn)世界各地時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)世界各地時(shí)間顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript實(shí)現(xiàn)圖片縮放功能
本文,我們來(lái)講講如何使用 JavaScript 實(shí)現(xiàn)圖片的縮放,當(dāng)然,我們可以類(lèi)比到其他的元素,比如視頻的縮放,文中有詳細(xì)的代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-07-07
原生JS實(shí)現(xiàn)貪吃蛇小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
js中call()和apply()改變指針問(wèn)題的講解
今天小編就為大家分享一篇關(guān)于js中call()和apply()改變指針問(wèn)題的講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
簡(jiǎn)單談?wù)凧S數(shù)組中的indexOf方法
最近在工作中遇到一個(gè)小問(wèn)題，這篇文章代碼我會(huì)簡(jiǎn)化成小例子展示給大家。給大家詳細(xì)的介紹JS數(shù)組中的indexOf方法，用心看到最后會(huì)有收獲哈，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
JS運(yùn)動(dòng)改變單物體透明度的方法分析
這篇文章主要介紹了JS運(yùn)動(dòng)改變單物體透明度的方法,結(jié)合實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
使用JavaScript解析URL參數(shù)為對(duì)象的多種方法
在前端開(kāi)發(fā)中,我們經(jīng)常需要從 URL 中獲取查詢(xún)參數(shù)并轉(zhuǎn)換為對(duì)象形式,以便更方便地使用這些參數(shù),本文將詳細(xì)介紹多種解析 URL 參數(shù)的方法,并提供完整的代碼實(shí)現(xiàn),需要的朋友可以參考下
2025-05-05
Js類(lèi)的構(gòu)建與繼承案例詳解
這篇文章主要介紹了Js類(lèi)的構(gòu)建與繼承案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
JS實(shí)現(xiàn)的自定義map方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的自定義map方法,結(jié)合實(shí)例形式分析了javascript自定義map相關(guān)的json數(shù)組定義、遍歷、添加、刪除、讀取等相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05