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

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

 "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 导航图标下方文字 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

C#控件命名规范

1、 本规范是个人平时使用时为方便个人使用而制定的一套规范,有很多地方不易记忆与理解,后续在具体的使用过程中会做一定的改动。

963
来自专栏老马寒门IT

10-移动端开发教程-移动端事件

在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 cl...

3757
来自专栏python3

tkinter -- Event(2)

特 殊 键Cancel/Break/BackSpace/Tab/Return/Sift_L/Shift_R/Control_L/Control_R/Alt_L/...

612
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

1493
来自专栏十月梦想

bootstrap之图片的响应式

前面提到了内容段落的响应式采用栅格系统进行不同设备的响应式,下面简单进行图片的样式和响应式介绍.

774
来自专栏微信小程序开发

小程序中tabBar的使用

知晓程序员,专注微信小程序开发的程序员! 今天说说tabBar的使用,先看看官方说法:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以...

4308
来自专栏nimomeng的自我进阶

NSScrollView官方文档

1662
来自专栏知道一点点

【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 内联表单</title> <link hre...

842
来自专栏欧科云

让你的网站文字“抖”起来

最近听说了一款挺火的软件,叫 “抖音”,发现它的标志有蓝红双色的叠加。我突然想到,我们的网站文字能否做出这个效果,甚至让文字像这个一样抖起来?答案当然是可以的。

843
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

44710

扫码关注云+社区