微信小程序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 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 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多用户计数器代码
2007/03/11 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue组件name的作用小结
2018/05/23 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python使用python-docx读写word文档
2019/08/26 Python
python实现局域网内实时通信代码
2019/12/22 Python
python 利用toapi库自动生成api
2020/10/19 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
毕业自我鉴定书
2014/03/24 职场文书
房屋维修协议书范本
2014/09/25 职场文书
团代会邀请函
2015/02/02 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
东京审判观后感
2015/06/01 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL