微信小程序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 条评论
登录 后参与评论

相关文章

来自专栏欧科云

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

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

933
来自专栏别先生

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

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

52110
来自专栏Keegan小钢

Android样式的开发:layer-list篇

上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景。但是,如果只提供一张图,会怎么样呢?比如,中间的Tab背景红色...

911
来自专栏GIS讲堂

CSS+JS实现tab标签切换

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

2663
来自专栏十月梦想

bootstrap之图片的响应式

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

834
来自专栏Scott_Mr 个人专栏

React Native 系列(九) -- Tab标签组件

4199
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(三)表单

table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->

2393
来自专栏python学习之旅

Python+Selenium笔记(六):元素定位

(一)  前言 Web应用以及包含超文本标记语言(HTML)、层叠样式表(CSS)、JS脚本的WEB页面,基于用户的操作(例如点击提交按钮),浏览器向WEB服务...

4078
来自专栏老马寒门IT

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

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

4437
来自专栏Material Design组件

Material Design — 菜单(Menus)

39010

扫码关注云+社区