小程序中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 条评论
登录 后参与评论

相关文章

来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

1926
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

946
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

1095
来自专栏ytkah

微信小程序tabbar设置样式在哪里改

7822
来自专栏Android先生

RecyclerView 自定义ItemDecoration从入门到实现吸顶效果

RecyclerView性能和自由度相比ListView强大很多,但很恼人的是它没有像ListView一样默认提供分割线。

791
来自专栏用户3030674的专栏

Android5.0新特性之——控件移动动画(初级)

最近开发,UI大牛们设计了好多很炫酷吊炸天的动画,不由得重新学习了一下5.0的ObjectAnimator动画。

1052
来自专栏一“技”之长

iOS开发中标签控制器的使用——UITabBarController

        与导航控制器相类似,标签控制器也是用于管理视图控制器的一个UI控件,在其内部封装了一个标签栏,与导航不同的是,导航的管理方式是纵向的,采用pus...

742
来自专栏糊一笑

移动端效果之IndexList

写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下: ? 代码请看这里:github 移动端效果之swiper 移动端效果之...

2074
来自专栏IMWeb前端团队

React.createClass vs extends React.Component

当我们学习ReactJS的时候, 都会通过官方Tutorial看到下面的写法. import React from 'react'; let TodoItem...

1948
来自专栏Spring相关

Vue中父组件向子组件传值

751

扫码关注云+社区