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版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。