微信小程序tabBar用法实例详解
更新时间：2017年12月04日 10:29:57 作者：FutrueJet
这篇文章主要介绍了微信小程序tabBar用法,结合实例形式详细分析了微信小程序中tabBar的功能、配置项使用方法与操作注意事项,并附带完整demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了微信小程序tabBar用法。分享给大家供大家参考，具体如下：
1、效果展示
2、原理：在app.json中配置tabBar属性
{
"pages": [
"index",
"picDisplay"
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "首页",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"color":"#666666",
"selectedColor":"#06bd04",
"list": [{
"pagePath": "index",
"text": "首页",
"iconPath": "images/index.png",
"selectedIconPath": "images/indexHL.png"
},{
"pagePath": "picDisplay",
"text": "图片展示",
"iconPath": "images/picDisplay.png",
"selectedIconPath": "images/picDisplayHL.png"
}]
}
}
3、关键代码
"tabBar": {
"color":"#666666",
"selectedColor":"#06bd04",
"list": [{
"pagePath": "index",
"text": "首页",
"iconPath": "images/index.png",
"selectedIconPath": "images/indexHL.png"
},{
"pagePath": "picDisplay",
"text": "图片展示",
"iconPath": "images/picDisplay.png",
"selectedIconPath": "images/picDisplayHL.png"
}]
}
4、操作方法
新建一个项目，打开app.json文件，将关键代码复制到"window":{},后面，注意window的大括号前加逗号，如下图
配置tabBar属性值
"tabBar": {
//设置tabBar文字默认颜色
"color":"#666666",
//设置tabBar文字被选中是的颜色
"selectedColor":"#06bd04",
//tab列表，数组类型，改数组内至少要有两个但不大于5个的tab对象
"list": [{
//设置tab跳转页面链接
"pagePath": "index",
//设置tab上的文字
"text": "首页",
//设置tab上的默认图标
"iconPath": "images/index.png",
//设置tab被选中时的图标
"selectedIconPath": "images/indexHL.png"
},{
"pagePath": "picDisplay",
"text": "图片展示",
"iconPath": "images/picDisplay.png",
"selectedIconPath": "images/picDisplayHL.png"
}]
}
tabBar的5种常用属性与配置说明：
1) color:未选择字体颜色
2) selectedColor:选择字体颜色
3) borderStyle:tabbar上方线的颜色white(仅支持白色和黑色)
4) backgroundColor:tabbar背景颜色
5) list：设置rab列表项（最少2个，最多5个tab）。
另外，list作为数组属性，其每一项又是一个对象，list可以设置4种属性：
① text：设置tab上的文字
② iconPath：设置tab处于未激活状态时显示的图片路径。
③ selectedIconPath：设置tab处于激活状态时的图片路径（iconPath与selectedIconPath图片大小限制都是40KB）
④ pagePath：设置触按tab时的跳转页面路径（该页面必须在pages中进行了配置）
5、完整实例代码点击此处本站下载。
此外，微信小程序开发软件下载地址如下：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714
希望本文所述对大家微信小程序开发有所帮助。
相关文章
这篇文章主要介绍了JS错误处理与调试操作,结合实例形式分析了JavaScript错误捕获、处理、调试工具、断点调试等相关操作技巧,需要的朋友可以参考下2020-04-04
下面小编就为大家带来一篇javascript将list转换成树状结构的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
解决layui数据表格Date日期格式的回显Object的问题
今天小编就为大家分享一篇解决layui数据表格Date日期格式的回显Object的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
深入理解 TypeScript Reflect Metadata
这篇文章主要介绍了深入理解 TypeScript Reflect Metadata，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript获取中英文混合字符串长度的方法,结合实例形式分析了javascript通过遍历转换字符串实现统计字符串长度的操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JavaScript实现在数组中查找不同顺序排列的字符串,本文用两个方法解决了这道算法题,需要的朋友可以参考下2014-09-09
作为一名前端开发,我们平时也少不了对文件流数据进行处理,今天简单整理一下日常开发中比较常见的一些处理文件流的场景及处理方法,希望可以帮助到大家2023-09-09
这篇文章主要给大家分享了20个JavaScript 单行代码,JavaScript单行代码杀手锏，可以让工作更有效率哦,需要的朋友可以参考一下，希望对你的学习有所帮助2021-12-12
这篇文章主要为大家详细介绍了bootstrap suggest搜索建议插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了JS脚本实现动态给标签控件添加事件的方法,结合实例形式分析了javascript添加事件监听的相关实现技巧,需要的朋友可以参考下2016-06-06
最新评论