小程序自定义tabbar实现教程：用户身份切换与vant组件应用指南

am928 发表于 2025-4-22 04:16:57

<p[]前言
在撰写公司项目时，遇到了这样一个需求：当用户登录后，如果该用户具备供应商身份，那么就在其个人资料下方显示切换按钮。用户点击切换按钮后，小程序的底部将会发生改变，变为其他样式。接下来，我将与大家分享我的实现方式，欢迎各位感兴趣的开发者阅读本文。

自定义

刚开始求助别人时，他们说我这个需求需要通过自定义实现。

安装vant/weap

此处使用的使用vant提供的，所以需要安装下。

<pre> <code class="hljs bash" lang="bash">使用 yarn 命令添加 @vant/weapp 并且是在生产环境下添加
</code></pre>
<pre> <code class="hljs bash" lang="bash">在本地的 npm 库中找到我们通过 yarn 安装的 vant-webapp 包。
在项目的根目录处创建 plguins 文件夹。接着，将第一步所找到的 vant-webapp 文件夹复制至该创建好的 plguins 文件夹中。
3. 安装完成，此时的目录结构是这样的
</code></pre>
配置-

根据小程序官网的内容，我们需要进行一些配置，这样小程序才能识别到我们的自定义。

<pre> <code class="hljs javascript" lang="javascript">// app.json
{
其他项被省略了。
"tabBar": {
如果 custom 设置为 true，那么小程序就会在项目目录中寻找 custom-tab-bar 文件夹。
"custom": true,
"color": "#CCCCCC",
"selectedColor": "#1296db",
"borderStyle": "black",
"list": [
 {
 "pagePath": "pages/home/home",
 "text": "首页",
 "iconPath": "images/icon/vegetables.jpg",
 "selectedIconPath": "images/icon/所选蔬菜的图标.png"
 },
 {
 "pagePath": "pages/shopping/shopping",
 "text": "购物车",
 "iconPath": "images/icon/shopping.png",
 "selectedIconPath": "images/icon/购物已选中.png"
 },
 {
 "pagePath": "pages/user/user",
 "text": "我的",
 "iconPath": ,
 "selectedIconPath": "images/icon/my_selected.png"
 }
]
},
"usingComponents": {
"van-tabbar": "/plguins/vant-weapp/dist/tabbar" 目录下的 index 文件,
"van-tabbar-item": "/plguins/vant-weapp/dist/tabbar-item/index" 这个路径指向了某个特定的文件或资源。它可能与插件 vant-weapp 中的 tabbar-item 相关，用于在特定的应用或项目中展示或处理 tabbar 相关的内容。
}
}
</code></pre>
<pre> <code class="hljs html" lang="html">
<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>
</code></pre>
<pre> <code class="hljs javascript" lang="javascript">Page({
data: {
active: 0,
},
onChange(event) {
this.setData({ active: event.detail });
switch ( event.detail) {
 case 0:
 // 首页
 wx.switchTab({
 url:''
 });
 break;
 case 1:
 // 购物车
 wx.switchTab({
 url:''
 });
 break;
 case 2:
 // 我的
 wx.switchTab({
 url:''
 });
 break;
}
}
});
</code></pre>
执行结果

我原本满心欢喜，觉得这个需求很简单，以为很容易就能实现。然而，编译之后，我的心态崩溃了，这用户体验实在太差了。我点击之后，页面虽然切换了，但我却没反应过来。

自定义组件

使用自定义形式来实现，用户体验不佳，所以只能去寻找另一种解决方案。经过一番查找后，答案指向了自定义组件，这种方案比较麻烦，需要对项目的原面进行重构，把原本的 Page 方式改成其他形式。

实现过程

<pre> <code class="hljs html" lang="html">
<view class='main-wrapper' style=margin-bottom 的值为 tabbarHeight 像素。>
<Index wx:if='{{isLogin === false}}'></Index>

<home wx:if=当 activeIndex 等于 0 且 isLogin 为真且 isSupplier 为假时 onShow="{{tabbar.selected}}"></home>

<commodity wx:if=如果 activeIndex 等于 0 并且 isLogin 为真并且 isSupplier 为真 onShow="{{otherBar.selected}}"></commodity>

<shopping wx:if=如果 activeIndex 等于 1 并且 isLogin 为真并且 isSupplier 为假 onShow="{{tabbar.selected}}"></shopping>

<order wx:if=如果 activeIndex 等于 1 并且 isLogin 为真并且 isSupplier 为真 onShow="{{otherBar.selected}}"></order>

<user wx:if=如果 activeIndex 等于 2 并且 isLogin 等于 true onShow="{{tabbar.selected}}"></user>
</view>
<van-tabbar wx:if=如果 isLogin 为真且 isSupplier 为假 active="{{ activeIndex }}" bind:change="onChange" z-index="9999">
<van-tabbar-item wx:for="{{tabbar}}" wx:key="index" info="{{item.tips}}">
<image
 slot="icon"
 src="{{item.imgSrc}}"
 mode="aspectFit"
 style="width: 30px; height: 18px;"
/>
<image
 slot="icon-active"
 src="{{item.selectImgSrc}}"
 mode="aspectFit"
 style="width: 30px; height: 18px;"
/>
{{item.name}}
</van-tabbar-item>
</van-tabbar>
<van-tabbar wx:if=如果 isLogin 为真且 isSupplier 也为真 active="{{ activeIndex }}" bind:change="onChange" z-index="9999">
<van-tabbar-item wx:for="{{otherBar}}" wx:key="index" info="{{item.tips}}">
<image
 slot="icon"
 src="{{item.imgSrc}}"
 mode="aspectFit"
 style="width: 30px; height: 18px;"
/>
<image
 slot="icon-active"
 src="{{item.selectImgSrc}}"
 mode="aspectFit"
 style="width: 30px; height: 18px;"
/>
{{item.name}}
</van-tabbar-item>
</van-tabbar>
</code></pre>
<pre> <code class="hljs javascript" lang="javascript">// main/index.js
/*
此处小程序的授权登录页面在 main 里进行引导，所以我们对这个文件进行了如下操作：
1. 我们需要在app.js创建一个全局变量isLogin
2. 在此处监听isLogin是否改变
如果改变 data 中定义的 isLogin 属性，那么 wxml 页面就会显示对应的 tabbar 并且进入 home 组件。
*/
const app = getApp();
Page({
data: {
tabbar: [
 {
 name: "首页",
 tips:'',
 selected: false,
 imgSrc:"/images/icon/vegetables.jpg",
 selectImgSrc:"/images/icon/vegetables_selected.png" 表示与蔬菜相关的选中图标。这个图标通常用于在界面或文档中标识选中的蔬菜相关元素或选项。它可能出现在各种与蔬菜相关的应用程序、网站或文档中，帮助用户快速识别和操作选中的蔬菜内容。
 },
 {
 name: "购物车",
 tips:'',
 selected: false,
 imgSrc:"/images/icon/shopping.png",
 selectImgSrc:这是一个图片路径，其具体为“/images/icon/shopping_selected.png”。
 },
 {
 name: "我的",
 tips: '',
 selected: false,
 imgSrc:"/images/icon/my.jpg",
 selectImgSrc:"/images/icon/我所选的.png"
 }
],
otherBar:[
 {
 name: "商品",
 tips: '',
 selected: false,
 imgSrc:"/images/icon/commodity.png",
 selectImgSrc:"/images/icon/商品已选中.png"
 },
 {
 name: "订单",
 tips: '',
 selected: false,
 imgSrc:"/images/icon/order.png",
 selectImgSrc:"/images/icon/order_selected.png" 这个图片标识为选中订单的图标。它在相关界面或操作中用于表示特定订单已被选中。
 },
 {
 name: "我的",
 tips: '',
 selected: false,
 imgSrc:"/images/icon/my.jpg",
 selectImgSrc:"/images/icon/my_selected.png"
 }
],
tabbarHeight: app.isIPhoneX ? 84 : 50, // 底部tabbar高度
activeIndex: 0,// 选中的tab
scrollTopArray: [], // 记录每个页面的滚动位置
app.globalData._isLogin 即为 isLogin
isSupplier: app.globalData._isSupplier,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.data.tabbar.forEach((item, index, arr) => {
 this.data.scrollTopArray = 0;
 // item.isFirstLoad = true
});
wx.setNavigationBarTitle({
 title: this.data.tabbar[0].name,
})
},
//定义监听回调方法
//app 监听回调方法
watchBack: function (value) {这里的 value 是 app.js 中 watch 方法里的 set ，并且它会返回整个 globalData 。
this.setData({
 isLogin: value._isLogin,
 isSupplier: value._isSupplier
});
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
const self = this;
this.updateSubPageShowHide(this.data.activeIndex);
// 监听全局变量的改变
获取 App 并对其进行监听，监听的对象是 self.watchBack 。
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
onChange(event) {
if (event.detail == this.data.activeIndex) return;
this调用 updateSubPageShowHide 并传入 event.detail 。
this.setData({
 activeIndex: event.detail,
 pageName: this4. 要求分句越短越好，同时保留原意。
});
// 还原子页面的滚动位置
wx.pageScrollTo({
 duration: 0,
 scrollTop: thisdata 中的 scrollTopArray 数组，其中的元素是 event.detail 所对应的内容。
})
},
// 记录每个子页面的滚动位置
onPageScroll(e) {
this.data.scrollTopArray[this.data 的 activeIndex 被设置为 e 的 scrollTop 。
},
// 更新组件的show hide 生命周期
更新子页面的显示隐藏状态，传入当前索引值 currentIndex 。
this.data.tabbar.forEach(function (value, i) {
 if (i == currentIndex) {
 value.selected = true;
 wx.setNavigationBarTitle({
 title: value.name,
 })
 } else {
 value.selected = false;
 }
});
this.setData({
 tabbar: this.data.tabbar,
})
},
});
</code></pre>
<pre> <code class="hljs javascript" lang="javascript">main/index.json 这里使用 tabbar 对应的组件进行声明。
{
"usingComponents": {
"home":"/pages/home/home",
"shopping": "/pages/shopping/shopping",
"user": "/pages/user/user",
"Index": "/pages/index/index",
"commodity": "/pages/commodity/commodity",
"order": /pages/commodityOrder/commodityOrder 这个路径用于展示商品订单相关的页面内容。它是一个特定的页面链接，指向商品订单的相关界面。通过这个链接，用户可以进行与商品订单相关的操作，如查看订单详情、修改订单信息等。
}
}
</code></pre>
<pre> <code class="hljs javascript" lang="javascript">// app.js
/*
因为在 main/index.js 里使用了全局变量 isLogin 和 isSupplier，所以我们需要进行如下操作。
 1. 在app.js中添加对应的全局变量
 2. 创建监听方法，监听这两个全局变量的改变
*/

globalData: {
userInfo: null,
// 是否登录
_isLogin:false,
// 是否供应商
_isSupplier:false,
data:{
}
},
watch: function (method) {
let obj = this.globalData;
Object.defineProperty(obj, "data", {这里的 data 与上面 globalData 中的 data 相对应。
 configurable: true,
 enumerable: true,
 set: function (value) {动态进行赋值操作，将对象进行传递，给 globalData 里的对应变量赋予相应的值。
 this._isLogin = value.isLogin;
 this_isSupplier 的值与 value.isSupplier 的值相同。
 method(value);
 },
 get: function () {//获取全局变量值，直接返回全部
 return this.globalData;
 }
})
}
</code></pre>
<pre> <code class="hljs javascript" lang="javascript">
// tabbar对应的页面改造成组件的示例
import base from "../../api/base";
var app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
height: {
 type: Number,
 value: app.homePageHeight
},
onShow: {
 type: Boolean,
 value: false,
 observer: 'onShowHideChange'
},
},
/**
* 页面的初始数据
*/
data: {
total: 0,
size: 0,
shoppingList: {},
baseUrl:base.defaultBaseUrl
},
/**
* 组件的方法列表
*/
methods: {
onShowHideChange(show) {
 if(show){
 // 组件显示时执行这里
 this.onShow();
 }else{
 }
},
},
onShow: function () {
 this.initData();
},
}
});
</code></pre>
执行结果

执行后，效果还不错，功能都实现了，但是还有一些遗留bug:

实现

当我带着遗留的关于自定义组件形式的问题去寻求他人帮助时，群友告知我这个动态设置的需求借助微信官方的 api 就能够达成。此刻，我的内心十分失落，昨天我怎么就没有发现这个解决方案呢？白白折腾了一整天。为了不让昨天的折腾白费，所以大家就看到了这篇文章的分享，这也算是对自己的一种安慰。

然而，仔细对微信提供的 api 进行观察后可以发现，此 api 仅仅能够改变 bar 的图标以及名字，却无法改变其跳转的路径。那么，我获取这个 api 又有什么用处呢？

我摊牌了，我搞不定了，谁行谁上吧，换一种方式实现吧。

写在最后

页: [1]

【宏智网络】's Archiver

小程序自定义tabbar实现教程：用户身份切换与vant组件应用指南