微信小程序tabBar底部导航中文注解api详解


Posted in Javascript onAugust 16, 2017

微信小程序tabBar底部导航中文注解api,信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释。
微信小程序tabBar是在全局app.json文件里面配置的。

 小程序tabBar配置代码注解

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window":{
    "navigationBarTitleText": "TabBar",
    "navigationBarBackgroundColor": "#F60",
    "navigationBarTextStyle": "white"
  },

  //tabBar注意是B是大写,有朋友提问运行时tab没出现,检查是不是这里手误
  "tabBar":{

  //文档指出color是必填项,其实可为空,不重写color就是深灰,样式更统一
    "color": "#ddd",

  //同样,文档指出selectedColor是必填项,不过selectedColor有必要重写,区分当前项与普通项
    "selectedColor": "#3cc51f",

  //同样,文档指出color是必填项,其实可为空,不重写backgroundColor就是浅灰,样式更统一。
    "backgroundColor": "#fff",

  //borderStyle,不写默认就是黑,那就黑好了,white的话,会少一条分隔线,跟页面混在一起了
    "borderStyle":"black",
    "list":[{
        "pagePath":"pages/index/index",

  //iconPath图标是非必填,只是tab栏会变矮,自然selectedIconPath也可不写
        "iconPath":"image/icon_API.png",
        "selectedIconPath":"image/icon_API_HL.png",
        "text":"index"
      },{
        "pagePath":"pages/detail/detail",
        "iconPath":"image/icon_component.png",
        "selectedIconPath":"image/icon_component_HL.png",
        "text":"detail"
      }]
  }
}

小程序tabBar参数说明

如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性说明:

微信小程序tabBar底部导航中文注解api详解

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

微信小程序tabBar底部导航中文注解api详解

微信小程序tabBar底部导航中文注解api详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 #Javascript
微信小程序开发animation心跳动画效果
Aug 16 #Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 #Javascript
微信小程序自定义模态对话框实例详解
Aug 16 #Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 #Javascript
JavaScript实现三级联动菜单效果
Aug 16 #Javascript
ionic3 懒加载
Aug 16 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php 8小时时间差的解决方法小结
2009/12/22 PHP
php防攻击代码升级版
2010/12/29 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
python实现装饰器、描述符
2018/02/28 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
学习Django知识点分享
2019/09/11 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python中求对数方法总结
2020/03/10 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
2014年五四青年节活动策划书
2014/04/22 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
爱心募捐通知范文
2015/04/27 职场文书
通讯稿范文
2015/07/22 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏