微信小程序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 30 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
create-react-app开发常用配置教程
Jun 25 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php文件下载处理方法分析
2015/04/22 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python 字符串操作方法大全
2014/03/11 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
详解Python多线程下的list
2020/07/03 Python
flask项目集成swagger的方法
2020/12/09 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
股东合作协议书
2014/09/12 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
检讨书格式
2019/04/25 职场文书