微信小程序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执行效率与性能提升方案
Dec 21 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
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基于单例模式实现的数据库操作基类
2016/01/15 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
基于javascript实现的快速排序
2016/12/02 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
Python 高级专用类方法的实例详解
2017/09/11 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
详解python中的异常和文件读写
2021/01/03 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
小学生家长评语大全
2014/02/10 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python