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,
"text": "首頁",
"iconPath": "static/imgico/bar3.png",
"selectedIconPath": "static/imgico/bar33.png"
"current": 3,
"text": "購物車",
"iconPath": "static/imgico/bar4.png",
"selectedIconPath": "static/imgico/bar44.png"
"current": 4,
"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