微信小程序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 ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
Apr 10 Javascript
javascript去除空格方法小结
May 21 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
微信小程序背景音乐开发详解
Dec 12 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
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
phpinfo的知识点总结
2019/10/10 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
python if not in 多条件判断代码
2016/09/21 Python
Python执行时间的计算方法小结
2017/03/17 Python
python 系统调用的实例详解
2017/07/11 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
详解python中sort排序使用
2019/03/23 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python右对齐的实例方法
2020/07/05 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
应届大专生自荐书
2014/06/16 职场文书
学生安全责任书范本
2014/07/24 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
母亲节主题班会
2015/08/14 职场文书
初中美术教学反思
2016/02/17 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL