微信小程序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 相关文章推荐
accesskey 提交
Jun 26 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
Javascript中的delete介绍
Sep 02 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue+element表格导出为Excel文件
Sep 26 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
Laravel 5 学习笔记
2015/03/06 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
日期 时间js控件
2009/05/07 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Python中的闭包实例详解
2014/08/29 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python高阶爬虫实战分析
2018/07/29 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
乡镇交通安全实施方案
2014/03/29 职场文书
企业指导教师评语
2014/04/28 职场文书
拓展策划方案
2014/06/03 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
初一数学教学反思
2016/02/17 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL