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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?