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