tabBar设置底部菜单选项、iconfont图标（图片）库、模拟京东app的底部导航栏
欢迎来到我的UniApp技术专栏！🎉 在这里，我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。
专栏特色：
📱 跨平台开发一站式解决方案
🚀 从入门到精通的完整学习路径
💡 实战项目经验分享
🔍 常见问题深度解析
无论你是刚接触UniApp的新手，还是有一定经验的开发者，都能在这里找到有价值的内容。我将持续更新最新技术动态和开发技巧，帮助大家提升开发效率，打造高质量的跨平台应用。如果文章对你有帮助，别忘了点赞收藏🌟，也欢迎在评论区留言交流，我会及时回复大家的问题！
让我们一起探索UniApp的无限可能！
目录
一.设置底部菜单栏（tabBar）
1.什么是tabBar？
2.在哪里设置tabBar？
二.iconfont图标（图片）库
1.百度搜索“iconfont”
2.搜索需要的图标
3.找到我们想要的类型，并点击下载
4.设置图片的颜色、大小
5.查看本地图片
三.实战：模拟京东app的底部导航栏
1.使用iconfont图标（图片）库，下载需要的图片
2.将下载好的图片，放到项目的static/imgs目录下
3.创建四个页面，分别是：首页、分类、购物车、我的
4.在pages.json中，编写tarBar底部导航组件
5.运行项目，查看效果
一.设置底部菜单栏（tabBar）
1.什么是tabBar？
直接翻译，tab bar的中文意思就是“标签栏”，即我们常说的菜单栏 / 选项栏 / 导航栏。
如下图所示。
2.在哪里设置tabBar？
也是在pages.json文件中，设置tabBar对象即可。
二.iconfont图标（图片）库
1.百度搜索“iconfont”
2.搜索需要的图标
3.找到我们想要的类型，并点击下载
4.设置图片的颜色、大小
5.查看本地图片
三.实战：模拟京东app的底部导航栏
1.使用iconfont图标（图片）库，下载需要的图片
注意：每一种图标，要下载两种颜色的版本，分别对应默认颜色、被选中时的高亮颜色。
收集好的所需图片如下，放在了一个文件夹中
2.将下载好的图片，放到项目的static/imgs目录下
3.创建四个页面，分别是：首页、分类、购物车、我的
4.在pages.json中，编写tarBar底部导航组件
在pages.json里面，添加下面的tabBar代码
"tabBar": {"color": "#8B8B8B",//默认文字颜色"selectedColor": "#FE3B13",//被选中时的文字高亮颜色"list": [//导航选项{"pagePath": "pages/home/home",//页面路径"text": "首页",//导航选项的文字描述"iconPath": "/static/imgs/tabBar/home.png",//默认图片的路径"selectedIconPath": "/static/imgs/tabBar/home-h.png"//被选中时的高亮图片的路径},{"pagePath": "pages/classify/classify",//页面路径"text": "分类",//导航选项的文字描述"iconPath": "/static/imgs/tabBar/classify.png",//默认图片的路径"selectedIconPath": "/static/imgs/tabBar/classify-h.png"//被选中时的高亮图片的路径},{"pagePath": "pages/buyCar/buyCar",//页面路径"text": "购物车",//导航选项的文字描述"iconPath": "/static/imgs/tabBar/buyCar.png",//默认图片的路径"selectedIconPath": "/static/imgs/tabBar/buyCar-h.png"//被选中时的高亮图片的路径},{"pagePath": "pages/me/me",//页面路径"text": "我的",//导航选项的文字描述"iconPath": "/static/imgs/tabBar/me.png",//默认图片的路径"selectedIconPath": "/static/imgs/tabBar/me-h.png"//被选中时的高亮图片的路径}]}5.运行项目，查看效果
注意：我们一定需要访问这四个页面之中的任何一个，才会显示出底部导航栏。
若访问其他页面，则不会显示底部导航栏。
以上就是本篇文章的全部内容，喜欢的话可以留个免费的关注呦~~