微信小程序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 导航图标下方文字 

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

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏Sorrower的专栏

界面无小事(六):来做个好看得侧拉菜单!

932
来自专栏学海无涯

Android开发之那些好用的数据结构与API(二)

在 Android开发之那些好用的数据结构与API 一文中提到了Android中一些好用的数据结构和API,这次继续补充几个我在项目中用到的好用的但是不是人人都...

3306
来自专栏ios 技术积累

UIProgressView 当前进度显示圆角

也就是把 UIProgressView的trackTintColor设置为透明。假如进度条没有填满是效果是这样的

1232
来自专栏分享达人秀

AdapterViewFlipper轻松完成图片轮播

上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilpper的使用。 一、认识Adapter...

1965
来自专栏向治洪

Android scrollview嵌套webview滑动冲突的解决方案

在Android开发中有时我们需要在scrollview中嵌套webview这时你会发现这两者的滑动事件产生了冲突导致:webview很难被滑动,即使被滑动了...

35710
来自专栏听雨堂

Android新手之旅(10) 嵌套布局

想在界面上放四个按钮,以2*2的形式存在,却没有办法快速实现。尝试了一下,可以用嵌套的方式,一个LinearLayout嵌套两个LinearLayout,外层...

1829
来自专栏freesan44

实现 iOS 前台时的推送弹窗效果

原文链接:http://www.jianshu.com/p/67864e1c2085

672
来自专栏飞雪无情的博客

Android TextView小组件的使用--附带超链接和跑马灯效果

然后运行该应用就可以看到TextView的效果,是显示一行字:“Hello World, HelloTextView!”,这是因为新建的Hello项目自带的一个...

705
来自专栏smy

触屏touchstart 与 click

设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失。 问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸...

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

小程序中tabBar的使用

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

4008

扫码关注云+社区