微信小程序tabbar设置样式在哪里改

最新推荐文章于 2025-10-14 16:29:14 发布

转载最新推荐文章于 2025-10-14 16:29:14 发布 · 7.1k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ytkah/p/9003345.html

文章标签：

#json #前端 #ViewUI

本文介绍了微信小程序底部导航TabBar的基本配置方法，包括颜色、背景颜色、边框样式等属性设置，以及如何通过配置list数组来实现至少2个、最多5个导航项的展示。此外还特别说明了当position设为top时，不支持显示icon的特点。

　　微信小程序tabbar通俗点说就是底部导航，我们一般会配置相关的菜单，方便读者快速导航。tabbar是在项目根目录中的配置文件 app.json 中进行设置；如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。tips：当设置 position 为 top 时，将不会显示 icon； tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

小程序tabbar

　"tabBar": {  
   "color": "#a9b7b7",  
   "selectedColor": "#11cd6e",  
   "borderStyle":"black",
　　"backgroundColor": "#ffffff",  
   "list": [{  
     "selectedIconPath": "images/111.png",  
     "iconPath": "images/11.png",  
     "pagePath": "pages/index/index",  
     "text": "首页"  
   }, {  
     "selectedIconPath": "images/221.png",  
     "iconPath": "images/22.png",  
     "pagePath": "pages/logs/logs",  
     "text": "日志"  
   }]  
 }

tabBar 指底部的导航配置属性
color 未选择时底部导航文字的颜色
selectedColor 选择时底部导航文字的颜色
borderStyle 底部导航边框的颜色（注意：tabbar上边框的颜色，仅支持 black/white，默认值是black）
list 导航配置数组
selectedIconPath 选中时图标路径
iconPath 未选中时图标路径
pagePath 页面访问地址
text 导航图标下方文字

转载于:https://www.cnblogs.com/ytkah/p/9003345.html