微信小程序开发实战(20):TabBar导航
时间:2022-07-23
本文章向大家介绍微信小程序开发实战(20):TabBar导航,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在很多App中,首页的下方通常会出现3到5个TabBar按钮,如图1所示。通过这些按钮,可以切换到不同的页面。其实这也属于导航的一种方式。
图1 App中TabBar的效果
其实小程序可以用非常简单的方式来实现这个效果,这一切不需要编写一行JavaScript代码。现在准备3个页面,如果是新建的小程序工程,默认会建立两个页面:index和logs,我们可以再建立一个page页面(新加的页面不要忘了在app.json文件中配置)。包含3个页面的工程结构如图2所示。
图2 工程目录结构
添加TabBar按钮,只需在app.json文件中添加tabBar属性即可,代码如下:
{
… …
"tabBar": {
"color": "#dddddd", // 未选中状态按钮文字的颜色
"selectedColor": "#3cc51f", // 选中状态按钮文字的颜色
"backgroundColor": "#ffffff", // 背景色
"list": [{ // 该数组元素表示TabBar按钮
"pagePath": "pages/index/index", // 当前按钮指向的页面
"iconPath": "../../images/face1.png", // 未被选中时的按钮图像文件路径
"selectedIconPath": "../../images/face.png", // 被选中时的按钮图像文件路径
"text": "页面1"
}, {
"pagePath": "pages/logs/logs", // 当前按钮指向的页面
"iconPath": "../../images/wechat.png",
"selectedIconPath": "../../images/wechatHL.png",
"text": "页面2"
}
, {
"pagePath": "pages/page/page", // 当前按钮指向的页面
"iconPath": "../../images/wechat.png",
"selectedIconPath": "../../images/wechatHL.png",
"text": "页面3"
}
]
}
}
运行程序后,会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。
图3 带TabBar的小程序
实际上,通过将tabBar的position属性值设为top,会将按钮放到页面上方,不过图像就不会显示了,效果如图4所示。
图4 在页面顶端显示TabBar的效果
- 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 数组属性和方法
- 如何扩展单个Prometheus实现近万Kubernetes集群监控?
- 一文带你彻底厘清 Isito 中的证书工作机制
- 如何将第三方服务注册集成到 Istio ?
- 【Pod Terminating原因追踪系列】之 containerd 中被漏掉的 runc 错误信息
- 【Pod Terminating原因追踪系列之二】exec连接未关闭导致的事件阻塞
- CD+服务网格灰度发布实践,一文带你体验如何编排更灵活
- 花十分钟的时间武装你的代码库
- 对HTML-input的一些思考和理解
- 【投稿】刀哥:Rust学习笔记 1
- 【Rust日报】2020-08-13 关于群集(Bevy)引擎ECS框架中system的语法糖是怎么实现的
- 最新情报:所有的递归都可以改写成非递归?
- 算法篇:树之转换为二叉搜索树
- 算法篇:树之倒数k个节点
- 揭开链表的真面目
- Coder,我怀疑你并不会枚举