未加星标

微信小程序tabBar用法实例详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例讲述了微信小程序tabBar用法。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序tabBar用法实例详解

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": {
//设置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

希望本文所述对大家微信小程序开发有所帮助。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 微信
tags: images,png,tab,tabBar,selectedIconPath,iconPath,text,pagePath,picDisplay,index,list,设置,color,微信,selectedColor
分页:12
转载请注明
本文标题:微信小程序tabBar用法实例详解
本站链接:http://www.codesec.net/view/569814.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(40)