配置基本的tabBar--底部导航配置属性
tabBar
如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页;
一、tabBar基本配置及属性说明
配置tabBar属性
在pages.json文件中,与“globalStyle”属性同级配置“tabBar”属性,代码结构如下:
tabBar属性中配置项说明
属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|---|
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 值仅微信小程序支持 |
fontSize | String | 否 | 10px | 文字默认大小 | App 2.3.4+ |
iconWidth | String | 否 | 24px | 图标默认宽度(高度等比例缩放) | App 2.3.4+ |
spacing | String | 否 | 3px | 图标和文字的间距 | App 2.3.4+ |
height | String | 否 | 50px | tabBar默认高度 | App 2.3.4+ |
midButton | Object | 否 | 中间按钮 仅在 list 项为偶数时有效 | App 2.3.4+ |
二、list属性配置及配置项说明
配置list属性
在tabBar属性中配置list配置项,主要用于点击切换对应的页面,list接收一个数组,数组中的每个项都是一个对象,代码如下:
list属性中配置项说明
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在pages中先定义 |
text | String | 是 | tab上按钮的文字,在App和H5平台为非必填。例如中间可放一个没有文字的+号图标 |
iconPath | String | 否 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 |
三、注意事项
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
- tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
- 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。
配置基本的tabBar--底部导航配置属性相关推荐
- 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验 前期准备 因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
- 微信小程序把玩(三)tabBar底部导航
为什么80%的码农都做不了架构师?>>> tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多 ...
- flutter TabBar 底部导航栏
更多文章请查看 lutter从入门 到精通 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
- uView(Tabbar 底部导航栏)
(一)第一种方式 1,每个菜单页面都要 "首页" "发布" "我的" 每个页面都要 <template><view> ...
- Vue - tabbar(底部导航栏)
文章目录 一.TabBar实现思路 二.assets文件夹 2.1 在App.vue里面动态引用css文件 三.基本搭建 四.TabBar和TabBarItem组件封装 4.1 TabBar组件封装 ...
- vant tabbar底部导航的使用
新建home.js <template><div id="home"><div class="tabbar_content"> ...
- 小程序 底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
- vue.js项目实战运用篇之抖音视频APP-第三节:底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- 微信小程序开发笔记二—底部导航栏tabar
文章目录 一.实现效果 二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件 三.注意事项 一.实现效果 首先展示一下实现效果 底部导航栏有三个按键 ...
最新文章
- C#之任务,线程和同步
- grunt.config()_gruntjs api
- 通过MyBatis查找一张表的数据,某些字段的值为空
- 程序设计中的驼峰原则
- 2016和2017的区别就是昨晚和今早
- SpringBoot整合kafka(实现producer和consumer)
- 静默授权获取unionid_Asp.Net Core 中IdentityServer4 授权中心之自定义授权
- mysql 伪哈希_MySQL技巧--伪哈希索引
- 十天学会单片机和c语言编程 ppt,十天学会单片机和C语言编程笔记1
- OPNET 学习系列(一)
- 检测相关问题面试准备
- php 高斯分布,多元高斯分布完全解析
- java短链接生成方法
- 易到暂停办理线下提现 称贾跃亭隐瞒巨额债务成影响提现关键因素
- POWERVR 是什么
- Android:一篇就够!全面详细解析APN(涉及内容:GGSN,authtype,MVNO,pdp,Apns-conf,supl,hipri,dun)
- 电脑录屏怎么录全屏?win10电脑如何录屏
- WordPress网站速度优化教程
- 【IEEE期刊专区】这本IEEE旗下期刊中科院升级为1区(TOP),什么来头?(附IEEE在检SCI目录)
- 市场调研-全球与中国云文档管理软件市场现状及未来发展趋势
热门文章
- 35岁后遭遇中年失业,除了送快递和开网约车,还能干什么工作?
- Redis五大数据类型(字符串对象(string)、列表对象(list)、哈希对象(hash)、无序集合(set)和Sorted Set数据类型(zset有序集合))
- aistarter助手程序未运行_师傅领进门之6步教你跑通一个AI程序!
- 图灵数学·统计学系列
- unity聚光灯_聚光灯团队最佳实践:碰撞性能优化
- 一览 A16z 在 2023 年重点关注的 Crypto 和 Web3 游戏想法
- oracle数据库创建表空间的语句
- 聊聊Twemproxy是什么
- HDU 6379 Invoker (2019-CCPC-秦皇岛站)DP
- 一文带你读懂Java字节码