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


Posted in Javascript onDecember 04, 2017

本文实例讲述了微信小程序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 相关文章推荐
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 #Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
基于JSONP原理解析(推荐)
Dec 04 #Javascript
You might like
虫族 Zerg 热键控制
2020/03/14 星际争霸
php调用mysql存储过程
2007/02/14 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
node.js中的console.time方法使用说明
2014/12/09 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
成考报名单位证明范本
2014/01/16 职场文书
创意广告词
2014/03/17 职场文书
励志演讲稿600字
2014/08/21 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
Python基本知识点总结
2022/04/07 Python