小程序系列--tabbar设置

底部导航栏配置

最新推荐文章于 2025-08-04 08:15:00 发布

图解前端

最新推荐文章于 2025-08-04 08:15:00 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端小程序小程序进阶文章标签：小程序

本文链接：https://blog.youkuaiyun.com/webofrxy/article/details/80291651

前端同时被 3 个专栏收录

22 篇文章

订阅专栏

小程序

5 篇文章

订阅专栏

小程序进阶

5 篇文章

订阅专栏

本文介绍了一个应用程序中底部导航栏的具体配置细节，包括颜色设置、背景样式及各导航项的页面路径、图标及其选中状态图标等。通过这些配置，开发者可以实现一个功能完整且视觉效果统一的底部导航。

"tabBar": {
     "color": "#626567",
     "selectedColor": "#2A8CE5",
     "backgroundColor": "#FBFBFB",
     "borderStyle": "white",
     "list": [{
       "pagePath": "pages/index/index",
       "text": "",
       "iconPath": "images/index.png",
       "selectedIconPath": "images/index_focus.png"
     }, {
       "pagePath": "pages/discovery/discovery",
       "text": "",
       "iconPath": "images/discovery.png",
       "selectedIconPath": "images/discovery_focus.png"
     }, {
       "pagePath": "pages/notify/notify",
       "text": "",
       "iconPath": "images/ring.png",
       "selectedIconPath": "images/ring_focus.png"
     }, {
       "pagePath": "pages/chat/chat",
       "text": "",
       "iconPath": "images/chat.png",
       "selectedIconPath": "images/chat_focus.png"
     }, {
       "pagePath": "pages/more/more",
       "text": "",
       "iconPath": "images/burger.png",
       "selectedIconPath": "images/burger_focus.png"
     }]
   },