微信小程序-（十四）自定义tabBar

本文最后更新于：April 3, 2022 pm

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

目录

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

官方文档教程

创建流程

配置信息

  • 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

创建tabBar文件

在根目录创建一个名为 custom-tab-bar 的文件夹，再选中文件夹右键，新建Component。命名为 index 。注意：这两个名称不能随意更改，必须一样！！！

然后在 index.wxml 的文件中即可实现自定义tabBar效果。在 app.json 文件中配置组件，然后在wxml中即可使用。

VantWeapp微信小程序版

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <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>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

快速设置tabBar

在 js 文件中配置需要展示的tabBar。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "信息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      this.setData({ active: event.detail });
    },
  }
})

然后在页面上动态读取tabBar并使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

这样就可以根据配置的tabBar而动态的加载了。

设置徽标

只需要给van-tabbar-item添加一个info=”3”属性即可。

设置图表和文字之间的距离：

1
2
3
4
5
6
// custom-tab-bar/index.js
Component({
  options:{
    styleIsolation:'shared' // 样式覆盖设置，具体见vant官方文档
  },
})

Vant官方文档解释样式覆盖

再设置样式：

1
2
3
4
/* custom-tab-bar/index.wxss */
.van-tabbar-item{
  --tabbar-item-margin-bottom: 0;
}

注意：这里的 van-tabbar-item 需要你手动调式查看tabBar的样式的类名，而 –tabbar-item-margin-bottom 为一个属性值。

徽标动态显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// custom-tab-bar/index.js
Component({
  options:{
    styleIsolation:'shared'
  },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "信息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png",
        info:3 //自定义属性。表示此项有徽标数
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  }
})

然后再根据是否有 info 属性值动态渲染展示。利用三元表达式。还有一点需要注意，如果info的值为0的话，也是不会进行渲染的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info:''}}">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

实现切换效果

首先需要将配置的tabBar的路径前面加上斜杠：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// custom-tab-bar/index.js
Component({

  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "/pages/message/message",
        "text": "信息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png",
        info:2
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },
})

然后再在事件方法中进行跳转：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// custom-tab-bar/index.js
Component({

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      this.setData({ active: event.detail });
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})

现在的页面是可以切换了，但是图标选中时是有问题的。

解决办法：可以把索引放在store中，然后再添一个改变索引的方法。然后再把store映射到tabBar的页面中即可。