其他分享
首页 > 其他分享> > uniapp原生tabbar设置并添加数字角标或小红点提示

uniapp原生tabbar设置并添加数字角标或小红点提示

作者:互联网

uniapp配置并设置原生tabbar,原生tabbar基本够用,没必要去用一些比较难配置的插件
//原生tabbar设置
在pages.json里面添加如下配置

"tabBar": {
"selectedColor": "#31869B",//点击之后的字体颜色
"iconWidth": "18px",//字体大小
"list": [{
"current": 0,
"pagePath": "pages/index/index",//页面地址url
"text": "首页",
"iconPath": "static/imgico/bar1.png",//tabbar图片
"selectedIconPath": "static/imgico/bar11.png"//点击之后显示的图标
},
{
"current": 1,
"pagePath": "pages/xxx/xxx",
"text": "客服",
"iconPath": "static/imgico/bar2.png",
"selectedIconPath": "static/imgico/bar22.png"
},
{
"current": 2,
"pagePath": "pages/xxx/xxx",
"text": "主页",
"iconPath": "static/imgico/bar3.png",
"selectedIconPath": "static/imgico/bar33.png"
},
{
"current": 3,
"pagePath": "pages/xxx/xxx",
"text": "购物车",
"iconPath": "static/imgico/bar4.png",
"selectedIconPath": "static/imgico/bar44.png"
},
{
"current": 4,
"pagePath": "pages/xxx/xxx",
"text": "我的",
"iconPath": "static/imgico/bar5.png",
"selectedIconPath": "static/imgico/bar55.png"
}
]
},


uni.setTabBarBadge({ //显示数字 index: 2,//tabbar下标 text: '1'//数字 }) uni.removeTabBarBadge({ //隐藏数字标 index:2 }) uni.showTabBarRedDot({ //显示红点 index: 2 }) uni.hideTabBarRedDot({ //隐藏红点 index:2 })
添加至任何页面的js事件里即可,事件执行,则显示或移除
详情可以看官网地址https://uniapp.dcloud.io/api/ui/tabbar?id=showtabbarreddot

标签:uniapp,index,xxx,static,tabbar,小红点,imgico,png
来源: https://www.cnblogs.com/h-w-b/p/15351788.html