小程序中tabBar的使用

知晓程序员,专注微信小程序开发的程序员!

今天说说tabBar的使用,先看看官方说法:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面

备注:

  1. 当设置 position 为 top 时,将不会显示 icon
  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

(tabBar图例讲解)

今天在做投一个小程序时,也用到了tabBar,先看一下示例:

为什么没有自己实现tabBar?因为自己实现的tabBar,没有官方的常驻底部的效果好,官方的组件也有限制:不能完全满足自定义需求。比如不支持iconfont图标,也不能展示其他样式风格。

不废话,来看代码吧,代码需要在app.json中进行配置,如下:

"tabBar": {
  "color": "#7f8389",
  "selectedColor": "#00a8f3",
  "borderStyle": "black",
  "backgroundColor": "#f7f7fa",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "新建投票",
      "iconPath": "images/create_vote.png",
      "selectedIconPath": "images/create_vote_selected.png"
    },
    {
      "pagePath": "pages/square/square",
      "text": "投票广场",
      "iconPath": "images/square_vote.png",
      "selectedIconPath": "images/square_vote_selected.png"
    },
    {
      "pagePath": "pages/myvote/myvote",
      "text": "我的投票",
      "iconPath": "images/my_vote.png",
      "selectedIconPath": "images/my_vote_selected.png"
    }
  ]
}

参数说明:

color:tab 上的文字默认颜色

selectedColor: tab 上的文字选中时的颜色

backgroundColor:tab 的背景色

borderStyle:tabbar上边框的颜色, 仅支持 black/white

position:可选值 bottom、top

注:color颜色请一定写成十六进制颜色,不要用RGB颜色,IOS设备上不识别RGB颜色~

可能会踏的坑:

其他页面,如果需要跳转至带tabBar的页面,必须使用wx.swichTab(),使用wx.navigateTo()和wx.redirectTo()都无效~

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-11-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我杨某人的青春满是悔恨

开源项目——『看知乎』iOS 版

前段时间无意中发现了看知乎,一个知乎答案和用户的精选站。网站开发者是知乎用户苏莉安,他写了个爬虫从知乎抓取数据,而且还提供了 API 文档。我大致看了下文档,感...

895
来自专栏程序员的碎碎念

你用JavaGUI做的课程设计是这样子的吗?

很多人学完《Java基础教程》后,接着一般都会用GUI来做一下课程设计,多数同学通常选择用插件WindowBuilder来设计程序的界面,认为用插件做会更快更...

4008
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第8章 示波器设计—测量功能

二代示波器测量功能实现比较简单,使用2D函数绘制即可。不过也专门开辟一个章节,为大家做一个简单的说明,方便理解。

622
来自专栏DannyHoo的专栏

iOS开发中动画之点赞图标放大效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

641
来自专栏java一日一条

最详细的 Android Toolbar 开发实践总结

Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来...

452
来自专栏IMWeb前端团队

浅尝iconfont

1. iconfont简介 什么是iconfont?正如字面意思,就是图标字体,下面我给大家慢慢道来 web页面包含什么元素? 文字 链接 流媒体 视频 音频 ...

1937
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第5章 示波器设计—波形快速刷新方案

波形快速刷新有很多方案需要测试,由于我们的GUI是采用的emWin,所以下面的这些测试都是基于emWin实现的。

632
来自专栏数据小魔方

粗边面积图

今天给大家分享的是一种在财经杂志上常见的粗边面积图。 ▽▼▽ 这种图表制作起来步骤并不复杂,主要是排版和图表元素格式化需要一些精加工。 ? ●●●●● 下面是制...

2525
来自专栏快乐八哥

HTML中拖放介绍

1.在jQuery UI里面会经常使用Draggable和Droppable,实现Web开发中拖放效果,当然这不是原生条的拖放,所以在处理复杂的拖放上还是需要自...

16110
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

1984

扫描关注云+社区