微信小程序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 相关文章推荐
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
PHP 的几个配置文件函数
2006/12/21 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Three.js学习之网格
2016/08/10 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python生成器generator用法示例
2018/08/10 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python的log日志功能及设置方法
2019/07/11 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
普通简短的个人自我评价
2014/02/15 职场文书
高三高考决心书
2014/03/11 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
创业女性典型材料
2014/05/02 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
财务总监岗位职责
2015/02/03 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
雷锋电影观后感
2015/06/10 职场文书
开学典礼校长致辞
2015/07/29 职场文书
财务管理制度范本
2015/08/04 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书