tabbar底部导航

https://www.bilibili.com/video/BV1K94y1B7Mx?p=7

下面是配置taBar

uniapp笔记-tabbar底部导航_css

注意:最少2个,最多5个

uniapp笔记-tabbar底部导航_App_02

修改page.json文件:

uniapp笔记-tabbar底部导航_css_03

uniapp笔记-tabbar底部导航_App_04

uniapp笔记-tabbar底部导航_css_05

然后重新启动

uniapp笔记-tabbar底部导航_App_06

uniapp笔记-tabbar底部导航_css_07

uniapp笔记-tabbar底部导航_App_08

uniapp笔记-tabbar底部导航_App_09

uniapp笔记-tabbar底部导航_App_10

下面设置其他页面的顶部标题和样式:(下面给出分类页面的设置、其他页面直接复制粘贴修改Text的内容即可)

uniapp笔记-tabbar底部导航_App_11

uniapp笔记-tabbar底部导航_App_12

修改一下底部导航的样式:

uniapp笔记-tabbar底部导航_底部导航_13

uniapp笔记-tabbar底部导航_底部导航_14

App.vue文件中可以设置每个页面的公告css:

uniapp笔记-tabbar底部导航_css_15

uniapp笔记-tabbar底部导航_App_16

设置底部导航栏的图标(分为未选中图标和选中图标):

uniapp笔记-tabbar底部导航_App_17

uniapp笔记-tabbar底部导航_tabbar底部导航 ​_18

uniapp笔记-tabbar底部导航_tabbar底部导航 ​_19