微信小程序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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js轮播图代码分享
Jul 14 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
JQuery学习总结【二】
Dec 01 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
js下载文件并修改文件名
May 08 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
12条写出高质量JS代码的方法
Jan 07 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
详解如何实现一个简单的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
正则表达式语法
2006/10/09 Javascript
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Vue自定义指令详解
2017/07/28 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Python中针对函数处理的特殊方法
2014/03/06 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Python发送邮件实现基础解析
2020/08/14 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
《画家乡》教学反思
2014/04/22 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL