小程序 – 自定义 TabBar

简介

小程序提供自定义 tabBar 功能，通过特定组件，小程序会自动把这个组件渲染到底部作为tabbar使用。

配置自定义tabbar

详情前往：自定义 tabBar 

创建tabbar组件文件

1.在根目录下，创建名为 custom-tab-bar 的文件夹，并在里面新建一个 index 组件

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

2.在 tabBar 配置中，设置 "custom": true ,使 tabbar 渲染自定义组件，而不演染 list 属性中的 tabbar 数组

注意：为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

app.json 中全部开启 或 tab 页中声明 usingComponents 项

{
  "tabBar": {
    "custom": true,

    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
}

使用 Vant 组件创建 tabbar

详细说明：Tabbar 标签栏

1.使用 npm 安装组件（略）

2.在app.json或index.json中引入组件

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

3.在 tabbar 组件的 wxml 中加入 Vant tabbar 组件结构。（也可以使用 wx:for 循环）

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

其中 active 为当前选中态的数据，bind:change="onChange" 为声明选中时的方法

在组件中，加入data 属性 active和onChange方法

  data: {
    active: 0, // 后续应该放在 mobx 上做公共数据
  },
  // 组件中需放入 methods 属性中
  onChange(event) {
    // event.detail 的值为当前选中项的索引
    this.setData({ active: event.detail });
    wx.swicthTab({
      // 切换页面
      url:this.data.list[event.detail].pagePath
    })
  },

active默认为数字，如果想让active作为自定义名字，可以在 van-tabbar-item中设定 name 值

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
</van-tabbar>

此时，选中后，active 值将为 "home"

4.显示微标

<van-tabbar-item icon="search" dot>显示红点</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">显示5条信息红点</van-tabbar-item>

 5.自定义图标

使用插槽方式自定义图标

 <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定义图标
  </van-tabbar-item>

  <van-tabbar-item icon="search">普通图标</van-tabbar-item>

其中，slot="icon" 为未选中状态下的插槽，slot="icon-active" 为选中状态下的插槽

6.定义切换际签事件

onClick(event) {
    wx.showToast({
      title: `点击标签 ${event.detail + 1}`,
      icon: 'none',
    });
  },

Vant 自定义 tabbar 参数列表

van-tabbar

Tabbar Event

TabbarItem Props

TabbarItem Slot

关于样式覆盖

若发现 Vant 组件样式不如预期，需要自定义一些地方的样式，可以通过覆盖样式的方式进行自定义样式，但微信小程序默认存在样式隔离，因此需要解除样式隔离。

在自定义组件中使用 Vant Weapp 组件时，需在组件中开启

styleIsolation: 'shared'

关于样式隔离，可查看下列文章

小程序 – 自定义组件 – 创建与引入

简介 小程序中除了页面，还包含了组件的功能，通过创建和引用组件可以更快速地开发小程序。   ……

2022-11-14