微信小程序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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
js实现索引图片切换效果
Nov 21 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 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之变量、常量学习笔记
2008/03/27 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
require.js的用法详解
2015/10/20 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
Python入门篇之字符串
2014/10/17 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python文字转语音实现过程解析
2019/11/12 Python
Python ini文件常用操作方法解析
2020/04/26 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
小露珠教学反思
2014/04/30 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
市场部岗位职责范本
2015/04/15 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
房屋产权证明书
2015/06/19 职场文书
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android