博客
关于我
uni-app(4)— 配置tabbar
阅读量:502 次
发布时间:2019-03-07

本文共 2826 字,大约阅读时间需要 9 分钟。

此文为uni-app总结笔记(4)— 配置tabbar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

Tips

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

常用属性说明:

属性 类型 必填 默认值 描述 平台差异说明
color HexColor tab 上的文字默认颜色
selectedColor HexColor tab 上的文字选中时的颜色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar 上边框的颜色,仅支持 black/white App 2.3.4+ 支持其他颜色值
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String bottom 可选值 bottom、top top 值仅微信小程序支持

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字,在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

示例代码:

"tabBar": {   		"list": [			{   				"text": "首页",				"pagePath":"pages/index/index",				"iconPath":"static/tabs/home.png",				"selectedIconPath":"static/tabs/home-active.png"			},			{   				"text": "信息",				"pagePath":"pages/message/message",				"iconPath":"static/tabs/message.png",				"selectedIconPath":"static/tabs/message-active.png"			},			{   				"text": "我们",				"pagePath":"pages/contact/contact",				"iconPath":"static/tabs/contact.png",				"selectedIconPath":"static/tabs/contact-active.png"			}		]	}

注意:

通过官网可知,pages 和 tabbar 同级。
在这里插入图片描述
为tabBar单独设置样式:

  1. “color”: 颜色
  2. “selectedColor”: 选中颜色
  3. “backgroundColor”: 背景颜色
  4. “borderStyle”: 上边框颜色( 仅支持 black 和 white )
  5. “position”: tabbar位置(可选值 bottom、top ,top 值仅微信小程序支持 )

效果展示

首页状态:
在这里插入图片描述
信息页状态
在这里插入图片描述
联系我们页面:
在这里插入图片描述
icon展示:
在这里插入图片描述

完整的page.json文件代码:

{   	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages		{   			"path": "pages/message/message",			"style": {   				"navigationBarTitleText":"信息页",				"navigationBarBackgroundColor":"#FF6666",				"h5": {   					"pullToRefresh": {   						"color":"#007AFF"					}				}			}		},		{   			"path": "pages/index/index"		},	    {   			"path":"pages/contact/contact"		}    ],	"globalStyle": {   		"navigationBarTextStyle": "white",		"navigationBarTitleText": "你好呀",		"navigationBarBackgroundColor": "#66CCCC",		"enablePullDownRefresh": true,		"backgroundColor": "#CCFFFF"	},	"tabBar": {   		"color":"#4CD964",		"selectedColor":"#DD524D",		"backgroundColor":"#FFFFFF",		"borderStyle":"black",		"position":"bottom",		"list": [			{   				"text": "首页",				"pagePath": "pages/index/index",				"iconPath":"static/tabs/home.png",				"selectedIconPath":"static/tabs/home-active.png"			},			{   				"text":"信息",				"pagePath":"pages/message/message",				"iconPath":"static/tabs/message.png",				"selectedIconPath":"static/tabs/message-active.png"			},			{   				"text":"我们",				"pagePath":"pages/contact/contact",				"iconPath":"static/tabs/contact.png",				"selectedIconPath":"static/tabs/contact-active.png"			}		]	}}

转载地址:http://wypcz.baihongyu.com/

你可能感兴趣的文章
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>
MFC模态对话框和非模态对话框
查看>>