微信小程序tabBar底部导航中文注解api详解

 更新时间:2017年08月16日 11:19:36   作者:Rolan  
这篇文章主要为大家详细介绍了微信小程序tabBar底部导航中文注解api,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


微信小程序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 按数组的顺序排序。

属性说明:

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS二维数组的定义说明

    JS二维数组的定义说明

    本篇文章主要是对JS二维数组的定义进行了说明介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 你需要知道的TypeScript高级类型总结

    你需要知道的TypeScript高级类型总结

    在开发过程中,为了应对多变的复杂场景,我们需要了解一下 TypeScript 的高级类型。本文就为大家整理了一些需要掌握的TypeScript高级类型,需要的可以参考一下
    2022-08-08
  • ElementUI table无缝循环滚动的示例代码

    ElementUI table无缝循环滚动的示例代码

    这篇文章主要介绍了ElementUI table无缝循环滚动的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • JavaScript防抖与节流超详细全面讲解

    JavaScript防抖与节流超详细全面讲解

    在开发中我们经常会遇到一些高频操作,比如:鼠标移动,滑动窗口,键盘输入等等,节流和防抖就是对此类事件进行优化,降低触发的频率,以达到提高性能的目的。本文就教大家如何实现一个让面试官拍大腿的防抖节流函数,需要的可以参考一下
    2022-10-10
  • bootstrap表格分页实例讲解

    bootstrap表格分页实例讲解

    这篇文章主要为大家详细介绍了bootstrap表格分页实例讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现防止网页被嵌入Frame框架的代码分享

    JavaScript实现防止网页被嵌入Frame框架的代码分享

    这篇文章主要介绍了JavaScript实现防止网页被嵌入Frame框架的代码分享,本文给出了2种防嵌入方法,需要的朋友可以参考下
    2014-12-12
  • JavaScript绘制游戏地图并且操控人物移动

    JavaScript绘制游戏地图并且操控人物移动

    JavaScript开发小游戏,目标是使用JavaScript绘制简单的二维地图,采用二维数组存储地图信息,使用表格绘制地图,每个td单元格存储数据,使用JavaScript keyPress键盘事件监听WASD键,按键触发时人物做出相应操作,人物下一步碰撞到障碍物,终止人物运动
    2023-10-10
  • JS使用window.requestAnimationFrame()对列表切片进行渲染

    JS使用window.requestAnimationFrame()对列表切片进行渲染

    这篇文章主要为大家介绍了JS使用requestAnimationFrame对列表切片进行渲染,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript深拷贝和浅拷贝概念与用法实例分析

    JavaScript深拷贝和浅拷贝概念与用法实例分析

    这篇文章主要介绍了JavaScript深拷贝和浅拷贝概念与用法,结合实例形式较为详细的分析了javascript深拷贝与浅拷贝的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • Echarts中X轴/Y轴坐标标签显示不下的问题解决

    Echarts中X轴/Y轴坐标标签显示不下的问题解决

    本文主要介绍了Echarts中X轴/Y轴坐标标签显示不下的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09

最新评论