微信小程序自定义tabBar的踩坑实践记录

2023-07-12 16:48:03 132

微信官方文档对自定义tabBar的阐述较为潦草，在开发自定义tabBar过程中我踩了很多坑，因此在此处做个总结。

我使用VantWeapp作为UI组件库，下面以此组件库为例。

定义tabBar

创建自定义tabBar文件

创建一个与/pages的同级目录，命名为 /custom-tab-bar，注意目录层级与目录命名问题，不可用其他名称命名。
在/custom-tab-bar下创建四个文件：

index.js
index.json
index.wxml
index.wxss

index.js

在index.js中我们定义相关数据：

active：当前被点击tab的索引
list：tab列表

以及一个切换tab时触发的方法：

functiononChange(event)：标签切换时触发，修改active值，点亮被点击的tab并进行页面跳转

Component({
data:{
//选中的tab
active:null,
//菜单列表
list:[
{
pagePath:'/pages/subscriptions/subscriptions',
text:'订阅',
name:'subscriptions',
icon:'bullhorn-o'
},
{
pagePath:'/pages/profile/profile',
text:'我的',
name:'profile',
icon:'user-o'
}
]
},
methods:{
//标签切换
onChange:function(event){
this.setData({active:event.detail})
wx.switchTab({
url:this.data.list[event.detail].pagePath,
})
}
}
})

index.json

在index.json中，将component参数值设为true，代表这是一个自定义组件：

{
"component":true
}

因为我使用了VantWeapp的tabBar标签栏，所以还需引入额外组件：

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

index.wxml

在index.wxml中定义组件形态，我在此处使用VantWeapp的tabBar标签栏，详见代码，不再赘述。



{{item.text}}

配置app.json

在app.json中配置如下参数：

usingComponents：仅声明即可
tabBar：tabBar组件的具体配置
- custom：设为true，表示使用自定义组件
- list：tab页列表，在列表中的页面将被设置为tab页，自动加载tabBar

{
"usingComponents":{

},
"tabBar":{
"custom":true,
"color":"#000000",
"selectedColor":"#000000",
"backgroundColor":"#000000",
"list":[
{
"pagePath":"pages/subscriptions/subscriptions",
"text":"订阅列表",
"iconPath":"",
"selectedIconPath":""
},
{
"pagePath":"pages/profile/profile",
"text":"关于我",
"iconPath":"",
"selectedIconPath":""
}
]
}
}

实现tabBar选中态

根据微信官方文档描述，每个tab页面tabBar的实例是不同的：

每个tab页下的自定义tabBar组件实例是不同的，可通过自定义组件下的getTabBar接口，获取当前页面的自定义tabBar组件实例。

显而易见，每当切换tab页时，我们都需要更新tabBar的选中态。关于选中态的实现，官方文档描述如下：

注意：如需实现tab选中态，要在当前页面下，通过getTabBar接口获取组件实例，并调用setData更新选中态。

我们可以在使用到tabBar的页面中这样实现：

Page({
onShow:function(){
if(typeofthis.getTabBar==='function'&&this.getTabBar()){
this.getTabBar().setData({
//当前页面的tabBar索引
active:1
})
}
}
})

至此，一个自定义tabBar的实现已全部完成。

踩坑

getTabBar()方法缺失

在实现tabBar选中态时遇到getTabBar()方法缺失的问题。在小程序开发工具中跳转到getTabBar()方法的定义，我们可以看到：

/**
*返回当前页面的custom-tab-bar的组件实例
*
*最低基础库版本：[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
**/
getTabBar():TrivialInstance

该方法的最低基础版本库为2.6.2，我们修改project.config.json文件中的libVersion字段，升级到指定版本库即可。
升级版本库后tabBar组件报错

报错内容如下：

Componentisnotfoundinpath"custom-tab-bar/index"

该原因是由于tabBar组件目录放置错误导致的，需要注意以下几点：

目录需与/pages同级
目录名称是custom-tab-bar
目录下所包含的文件名为index.后缀
在app.json配置中，tabBar下的custom字段需设置为true

getTabBar()始终返回null

依旧是目录放置与文件命名问题，处理方法同上。

另外，不需要在app.json的usingComponents引入tabBar组件，如果你放置目录与命名正确，小程序会自动引入。

参考文档

小程序官方文档：自定义tabBar
官方自定义tabbar的显示和隐藏
使用自定义tabbar,在tab页中使用this.getTabBar()一直返回null，什么原因？
getTabBar无法调用接口相关说明在哪里？

总结

到此这篇关于微信小程序自定义tabBar踩坑实践记录的文章就介绍到这了,更多相关微信小程序自定义tabBar踩坑内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

微信小程序自定义tabBar的踩坑实践记录

热门推荐

随机推荐