底部导航栏 Tabbar

通过 tabBar 配置项可以指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。
但是需注意的是,自定义tabbar作为微信在2.5.0 (2019.01.11)版本更新的新内容,在功能覆盖面、使用机制和体验上,尚未成熟,本组件提供封装好的接口方便使用,同时满足了一些微信原生tabBar完成不了的特殊样式。

注意事项

  • 要保证自定义tabBar生效,需要最新的基础库版本支持,以及最新的微信开发者工具。
  • 除了特殊样式外,请尽量使用官方原生的方式生成Tabbar

使用方法

自定义Tabbar是为了满足特定样式和需求而开发的,在目前版本下,开发体验并不友好,本文尽可能详尽的描述,以避免一些令开发者困扰的问题。Tabbar为了考虑支持更多的业务,设计了两种使用方式:

  • 其一是自定义模式,同微信文档中的自定义tabbar这个概念一样,使用方法也可以去参考微信给的文档,我们也在后文中给出详细的说明。
  • 其二是常规组件模式,也就是像之前的组件一样来引入使用,用法想必大家已经熟记于心了,可以参见组件上手

自定义模式

首先,我们需要来配置app.json 这个文件,和设置原生tabBar一样,我们需要在TabBar这个对象里新增一个属性custom,并将它设置为true,这代表我们开启了自定义tabBar的开关。

接着,需要配置tabBar对象里的list属性,你只需要保证每个tab页对应的pagePath为正确有效的路径即可,其余的属性如iconPath都是不生效的(可以不填写)。

注意事项

  • 要保证自定义tabBar生效,只需要保证tabBar属性下的customtrue,且list数组的每一项都具有正确有效的pagePath
  • custom-tab-bar拷贝出来作为替代原生tabBar时,需要将组件js里的properties全部删除,并且将data里的注释取消,根据注释内容的规范填写要渲染的tab。

好了,完成上面的步骤后,我们来看看组件源码部分需要做哪些更改配置
首先,要将custom-tab-bar组件从Lin UI源码里复制出来,粘贴在根目录下,与app.jsonapp.js文件同级。这可能会让你觉得有些奇怪,是不是和之前使用组件的方式不太一样?

关于这点,可以翻看微信官方关于自定义tabbar这个新功能的解释说明,这里不再多做赘述。 并且,不可更改tabBar组件的文件夹名称,必须保证文件夹名为custom-tab-bar,这一点请切记

这个时候,基础的配置工作已经完成了,要让lin-ui的自定义tabbar完全接管 tabBar 的渲染,还需要做另外一步操作,想必你已经想到了。

没错,也就是需要我们在custom-tab-bar组件的js代码里做自己的tab项的配置了。

因为该组件的特殊性,在自定义用法中,所以没法采用props属性传值的形式来做一些操作,所以我们将基础配置信息写入data里来渲染,并且删除properties里的所有内容(properties里的选项是用来给第二种用法使用的,二者不可兼得),同时通过this.getTabBar()来获取组件实例(注意在多层嵌套里的this指向问题),并通过我们封装好的方法来做组件切换的渲染操作。

下文的代码只是一个例子,仅供参考。

  data: {
    selected: null,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "首页"
    }, {
      pagePath: "/index2/index",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "购物车"
    }, {
      pagePath: "/index3/index",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "我的"
    }]
  },

最后一步,也是最重要的一步,当我们在切换选中项的时候,需要手动触发tabbar的更改(不然会出现点击第二次才会更改的异常现象),自定义tabBar新增了getTabBar 接口,可获取当前页面下的自定义tabBar组件实例。

接着需要我们手动去触发tabbar的切换,每次切换我们都需要在当前page页面的js文件中,找到onShow这个生命周期函数,在其中执行this.getTabBar().showItem(index), 其中showItem()的参数index 是当前页面在tabBar里的下标,如跳转到第一个tab页,index值为0,第二个tab页,index值为1

  onShow: function () {
    this.getTabBar().showItem(1)
  }

常规模式

常规的使用方法与Lin UI其他的组件一样,这里不做赘述,但是需要耐心阅读本文,参照下面的底部菜单栏属性列表去配置。

关于两种方式的优缺点

常规模式就是普通组件的使用方式,优点是之前组件怎么用,现在tabbar就怎么用,不会出现困惑。缺点是每次切换的时候,页面重新渲染。

自定义模式优点是接替原生tabbar的渲染,但是实际上,它只是在page标签下生成一个<tab-bar>的标签,这样会带来几个问题:

  • 第一就是会占据page的内容高度,也就是说page的高假设为1336rpx,tabbar的高是100rpx,那么page中,在1236~1336rpx之间的视图部分会被遮挡,需要自己处理,可以添加一个高度为100rpx的div在<page />里。
  • 第二个问题是在页面下拉的时候会把tabbar也下拉出去。
  • 第三个问题是tabbar在每个页面都需要手动调用this.getTabBar().showItem()方法去更改选中项,这说明每个页面的组件实例不是同一个,假设我又三个tab页,那么我就需要生产3个tabbar的实例,在每个页面初始化的时候,tabbar会有轻微的闪动,但是实例化完成后,就没有这种效果了,这个时候效果和原生tabbar几乎没有差别。

以上就是自定义tabbar的一些用法和现状,相信微信会继续完善这一块的内容。

基本案例

自定义tabbar的参数设置和微信原生的tabbar参数基本一致,可以参考文末的底部菜单栏属性部分来学习。当我们在list里写入了对应页面的参数后,就能生成的tabbar了。

设置尺寸和背景色

lin-ui的自定义tabbar可以通过backgroundColoriconSize设置背景色和icon的大小。

只有icon的TabBar

TabBar的当前tab项可以只设置图片的路径iconPathiconSize,这样我们可以做到更定制化的效果。

顶部带半圆的TabBar

lin-ui的自定义tabbar的list可以生成不同的tab项,每一项里都有对应的属性来设置更具特色的tab项,当设置 stylecircle时。当前tab项的顶部出现半圆。

带背景图片的TabBar

当一些重要节日到来,需要我们在tabbar上面做一些更绚丽的效果时,我们可以通过backgroundImg来设置自定义TabBar的背景图片,更加充满节日气息。

注意事项

  • 1,backgroundImg的权重大于backgroundColor,当设置背景图片后,背景色便不生效了。
  • 2,当我们使用背景图片时,最好不要再设置单个tab的顶部为半圆。

底部菜单栏属性(TabBar Attributes)

参数 说明 类型 可选值 默认值
show 控制tabBar组件的显示和隐藏 Boolean true/false true
isSwitchTab 控制tabBar跳转使用的方法是否是wx.switchTab,false代表使用wx.navigate跳转 Boolean true/false true
selected tabBar组件的选中项的下标 Number null
color tab 上的文字默认颜色,仅支持十六进制颜色 String #7A7E83
fontSize tab 上的文字的大小 Number 24
selectedColor tab 上的文字选中时的颜色,仅支持十六进制颜色 String 主题色
backgroundColor tab 的背景色,仅支持十六进制颜色 String #fff
backgroundImg tab 的背景图片,仅支持网络图片和base64 String
list tab 的列表,详见 list 属性说明,最少2个、最多5个 tab Array

底部菜单栏事件 (TabBar Events)

事件名称 说明 返回值 备注
bind:lintap 点击切换的时候触发 detail:当前下标 -

list属性(List Attributes)

参数 说明 类型 可选值 默认值
pagePath 页面路径 String null
text tab 上按钮文字 String
iconSize 图片尺寸,默认是64*64,单位是rpx String 64
iconPath 图片路径,建议尺寸为 81px * 81px String
selectedIconPath 选中时的图片路径,建议尺寸为 81px * 81px String
style 当设置成‘circle’时,显示当前tabBar的border-bottom 为半圆 String
redDot 显示 tabBar 某一项的右上角的红点 Boolean true/false false
badge 为 tabBar 某一项的右上角添加文本 String

底部菜单栏方法 (TabBar Methods)

方法名称 说明
show() 控制整个tabBar的显示
hide() 控制整个tabBar的隐藏
showItem(idx) 切换tabBar的选中项,参数为tabBar下标
showRedDot(idx) 显示 tabBar 某一项的右上角的红点,参数为tabBar的下标
hideRedDot(idx) 显示 tabBar 某一项的右上角的红点,参数为tabBar的下标
setTabBarBadge(idx,text) 为 tabBar 某一项的右上角添加文本
removeTabBarBadge(idx) 移除 tabBar 某一项的右上角添加文本
    上次更新: 2019-3-18 08:44:50