小程序中TabBar中加一个消息提醒
时间: 2024-05-09 15:15:44 浏览: 20
要在小程序的 TabBar 中加入消息提醒,需要使用小程序原生的组件 `tabBar` 和 `badge`。
首先,在 `app.json` 中配置 `tabBar`,可以设置 `badge` 字段为一个数字,表示未读消息数量:
```json
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/home.png",
"selectedIconPath": "image/home-selected.png",
"badge": 3
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "image/message.png",
"selectedIconPath": "image/message-selected.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "image/my.png",
"selectedIconPath": "image/my-selected.png"
}
]
}
}
```
然后,在 `message` 页面中,可以通过 `wx.setTabBarBadge` 方法来设置 `badge` 的值:
```javascript
wx.setTabBarBadge({
index: 1,
text: 'New'
})
```
其中,`index` 表示要设置哪一个 Tab 的 `badge`,从左往右数,从 0 开始;`text` 表示要显示的文本内容。
当然,如果要取消 `badge`,可以使用 `wx.removeTabBarBadge` 方法:
```javascript
wx.removeTabBarBadge({
index: 1
})
```