微信小程序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 原型继承介绍
Aug 30 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python合并多个excel文件的示例
2020/09/23 Python
家长会学生演讲稿
2014/04/26 职场文书
社会公德演讲稿
2014/05/20 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书