微信小程序使用Vant Weapp组件库实现tabBar标签栏

概述

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

实现过程

引入tarBar组件

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

"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是定制的

"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代码

<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.js的methods函数里面添加以下代码

//用户点击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
	})
}