小程序中tabBar的使用
时间:2022-05-03
本文章向大家介绍小程序中tabBar的使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
知晓程序员,专注微信小程序开发的程序员!
今天说说tabBar的使用,先看看官方说法:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
备注:
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
(tabBar图例讲解)
今天在做投一个小程序时,也用到了tabBar,先看一下示例:
为什么没有自己实现tabBar?因为自己实现的tabBar,没有官方的常驻底部的效果好,官方的组件也有限制:不能完全满足自定义需求。比如不支持iconfont图标,也不能展示其他样式风格。
不废话,来看代码吧,代码需要在app.json中进行配置,如下:
"tabBar": {
"color": "#7f8389",
"selectedColor": "#00a8f3",
"borderStyle": "black",
"backgroundColor": "#f7f7fa",
"list": [
{
"pagePath": "pages/index/index",
"text": "新建投票",
"iconPath": "images/create_vote.png",
"selectedIconPath": "images/create_vote_selected.png"
},
{
"pagePath": "pages/square/square",
"text": "投票广场",
"iconPath": "images/square_vote.png",
"selectedIconPath": "images/square_vote_selected.png"
},
{
"pagePath": "pages/myvote/myvote",
"text": "我的投票",
"iconPath": "images/my_vote.png",
"selectedIconPath": "images/my_vote_selected.png"
}
]
}
参数说明:
color:tab 上的文字默认颜色
selectedColor: tab 上的文字选中时的颜色
backgroundColor:tab 的背景色
borderStyle:tabbar上边框的颜色, 仅支持 black/white
position:可选值 bottom、top
注:color颜色请一定写成十六进制颜色,不要用RGB颜色,IOS设备上不识别RGB颜色~
可能会踏的坑:
其他页面,如果需要跳转至带tabBar的页面,必须使用wx.swichTab(),使用wx.navigateTo()和wx.redirectTo()都无效~
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【翻译】Rust生命周期常见误区
- 代码管理
- 【翻译】200行代码讲透RUST FUTURES (3)
- ECCV2020 | FReLU:旷视提出一种新的激活函数,实现像素级空间信息建模
- 字符处理——大小写转换编码知识扩展
- 【Rust日报】2020-07-26 - Easy Rust 让Rust文档更容易理解
- VBA使用API_04:标准控件
- OpenCV与图像处理(五)
- 常用功能加载宏——工作表目录
- VBA操作VBA——VBA工程对象
- 前端|3D立体视频翻转动画
- 利用STS临时密钥服务快速搭建直传页面的实践
- 常用功能加载宏——单元格聚光灯
- VBA操作VBA——代码操作
- 字符处理——大小写转换编程思路扩展