概述

和微信官方的tabBar标签栏相比,Vant Weapp的tabBar标签栏更加美观,还有徽标提示

实现过程

引入tarBar组件

引入步骤查看:微信小程序引入 Vant Weapp 组件库 | LeDao’s Blog (zoutl.cn)

1
2
3
4
"usingComponents": {
"van-tabbar": "/dist/tabbar/index",
"van-tabbar-item": "/dist/tabbar-item/index"
}

新建页面

要新建的页面和上一篇博客一样,博客链接为:微信小程序实现 tabBar 标签栏 | LeDao’s Blog (zoutl.cn)

添加tarBar配置

app.json中添加tarBar配置,"custom": true用来声明这个tarBar是定制的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/shouye/shouye",
"text": "首页"
},
{
"pagePath": "pages/type/type",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"text": "我的"
}
]
}

新建Component

首先在根目录下添加一个文件夹,该文件夹要命名为custom-tab-bar,然后右键点击这个文件夹,选择新建Component并输入index

custom-tab-bar/index.wxml中编写Vant Weapp的tarBar代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<view>
<van-tabbar active="{{ active }}" active-color="#e35d55" bind:change="onChange" placeholder="true">
<van-tabbar-item icon="wap-home-o" data-page="shouye" data-target="/pages/shouye/shouye">
首页
</van-tabbar-item>
<van-tabbar-item icon="apps-o" data-page="type" data-target="/pages/type/type">
分类
</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" data-page="cart" data-target="/pages/cart/cart" dot="true">
购物车
</van-tabbar-item>
<van-tabbar-item icon="manager-o" data-page="my" data-target="/pages/my/my">
我的
</van-tabbar-item>
</van-tabbar>
</view>

custom-tab-bar/index.jsmethods函数里面添加以下代码

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
//用户点击Tabbar的时候调用微信内置函数wx.switchTab()进行Tab切换
onChange(event) {
// event.detail 的值为当前选中项的索引
var that = this
switch (event.detail) {
case 0:
wx.switchTab({
url: '/pages/shouye/shouye'
})
break
case 1:
wx.switchTab({
url: '/pages/type/type'
})
break;
case 2:
wx.switchTab({
url: '/pages/cart/cart'
})
break;
case 3:
wx.switchTab({
url: '/pages/my/my'
})
break;
default:
break;
}
},
//改变active属性,从而告诉Tabbar用户点击的是第几个Tab
init(active) {
this.setData({
active: active
})
}

修改标签页的js文件

首先说明一下,标签页的索引从0开始

image-20221128002939747

在首页的js文件的onShow()函数加入以下代码(分类、购物车、我的3个页面也要加),对应的索引看上图

1
2
3
onShow() {
this.getTabBar().init(0);
}

效果

PS.

如果页面的内容过多需要下拉时,会有部分内容被Vant Weapp的tabBar标签栏遮住,即使使用placeholder属性也没有用,我们可以在该页面的最后加入下面代码解决这个问题

1
<view style="padding-bottom: 20%;"></view>

如果要使用微信官方的tarBar标签栏查看博客:微信小程序实现 tabBar 标签栏 | LeDao’s Blog (zoutl.cn)