微信小程序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 读取图片文件的大小
Jun 25 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
javascript基础知识讲解
Jan 11 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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+dbfile开发小型留言本
2006/10/09 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python队列原理及实现方法示例
2019/11/27 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python使用建议与技巧分享(一)
2020/08/17 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
商场中秋节广播稿
2014/01/17 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
考试作弊检讨
2015/01/27 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python