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