小程序中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多设备多字体适配方案总结

一、背景 2014下半年,微信iOS版先后适配iPad, iPhone6/6plus。随着这些大屏设备的登场,部分用户觉得微信的字体太小,但...

3955
来自专栏小尘哥的专栏

小程序(2)- 基础样例

基本这些配置就可以满足正常的开发,其他有一些比如request请求超时之类的,都采用默认即可

843
来自专栏JetpropelledSnake

Notepad++ 主题配色配置

4813
来自专栏非著名程序员

技术分享:Android开发辅助工具之ButtonMaker

Android Button Maker是一个可以在线生成按钮代码的工具。Android API提供了XML文件定义的几何形状的Drawable资源,包括颜色、...

1789
来自专栏知识分享

android的PowerManager和PowerManager.WakeLock

  学习android一段时间了,为了进一步了解android的应用是如何设计开发的,决定详细研究几个开源的android应用。从一些开源应用中吸收点东西,一边...

694
来自专栏岑志军的专栏

react-navigation的使用

1566
来自专栏美团技术团队

关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也...

3147
来自专栏前端知识分享

第121天:移动端开发基本知识

注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。

794
来自专栏xingoo, 一个梦想做发明家的程序员

CSS布局那点事儿

布局 最开始老的一代网站开发,布局都是通过表格实现的。 这样可以形成规整的网格布局,但是也会带来一定的复杂性。比如想要新增某个页面元素,就有可能要改动整个表格...

2045
来自专栏代码散人

Android Lifecycle框架介绍

Lifecycle 是属于 Android Architecture Components 的一个组件, 而Android Architecture Compo...

411

扫码关注云+社区