微信小程序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 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

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

相关文章

  • 将URL地址都变成ooooooooo的神奇小工具使用介绍

    将URL地址都变成ooooooooo的神奇小工具使用介绍

    这篇文章主要为大家介绍了将URL地址都变成ooooooooo的神奇小工具使用介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • js模拟支付宝密码输入框

    js模拟支付宝密码输入框

    这篇文章主要为大家详细介绍了js模拟支付宝密码输入框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • php,js,css字符串截取的办法集锦

    php,js,css字符串截取的办法集锦

    这篇文章主要介绍了php,js,css字符串截取的办法,其实没有什么技术含量,就是记录一下,方便自己复习巩固,希望对大家能有所帮助
    2014-09-09
  • JavaScript插件化开发教程 (二)

    JavaScript插件化开发教程 (二)

    本系列的开篇文章我们一起探讨了jQuery如何开发插件,今天这篇文章,我们来继续插件开发之旅,希望大家能够喜欢。
    2015-01-01
  • JavaScript es6中var、let以及const三者区别案例详解

    JavaScript es6中var、let以及const三者区别案例详解

    这篇文章主要介绍了JavaScript es6中var、let以及const三者区别案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • js返回上一页并刷新的多种实现方法

    js返回上一页并刷新的多种实现方法

    这篇文章主要介绍了js返回上一页并刷新的几种方法,需要的朋友可以参考下
    2014-02-02
  • javascript之bind使用介绍

    javascript之bind使用介绍

    首先apply和call是老生常谈的东西,但是对于bind,我愣了下,因为这个词是jquery中使用频率很高的一个方法,用来给DOM元素绑定事件用的
    2011-10-10
  • JavaScript this绑定与this指向问题的解析

    JavaScript this绑定与this指向问题的解析

    本文主要介绍了JavaScript this绑定与this指向问题的解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 你可能从未使用过的11+个JavaScript特性(小结)

    你可能从未使用过的11+个JavaScript特性(小结)

    这篇文章主要介绍了你可能从未使用过的11+个JavaScript特性(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JavaScript逻辑运算符相关总结

    JavaScript逻辑运算符相关总结

    这篇文章主要介绍了JavaScript逻辑运算符的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09

最新评论