从小白到技术大牛，我的小程序动态设置tabBar踩坑之旅

小程序tabBar踩坑之旅--动态设置tabBar

最近做了几个小程序项目，几乎每个项目中都会用到小程序的tabBar。今天我们就一起来愉快的玩一下这个东西吧。

我们先从最初的版本也是最简单的版本开始吧。小程序的配置项里已经帮我们准备了tabBar的一切，我们只需要按照文档中的格式在app.json中配置tabBar的内容就可以。这种方式是固定的，我们不能在代码里对tabBar进行任何操作。这对于一些简单的项目来说是够用的，但是对于一些复杂的项目来说，我们就需要用到动态设置tabBar了。

动态设置tabBar可以让我们在代码里对tabBar进行各种操作，比如隐藏、显示、切换、设置选中项等等。这给我们带来了很大的灵活性，可以让我们根据不同的情况来调整tabBar的内容和样式。

那么，我们该如何动态设置tabBar呢？这里有两种方法：

• 第一种方法是使用setData()方法。

这种方法很简单，只需要在需要设置tabBar的时候调用setData()方法，然后将tabBar的相关数据作为参数传入即可。比如，我们要隐藏tabBar，只需要调用如下代码：

this.setData({
  tabBarHidden: true
})

• 第二种方法是使用setTabBar()方法。

这种方法比setData()方法更灵活，我们可以对tabBar的各个属性进行单独的设置。比如，我们要设置tabBar的选中项，只需要调用如下代码：

wx.setTabBarItem({
  index: 1,
  text: '发现'
})

踩坑案例

在使用动态设置tabBar的时候，我们可能会遇到一些坑。这里列举一些常见的踩坑案例：

• 坑1：tabBarHidden属性失效。

在某些情况下，tabBarHidden属性可能会失效。这是因为tabBarHidden属性只对当前页面有效，如果我们在其他页面修改了tabBarHidden属性，那么当前页面的tabBarHidden属性不会受到影响。

• 坑2：setTabBarItem()方法不生效。

setTabBarItem()方法只对当前页面的tabBar有效，如果我们在其他页面调用setTabBarItem()方法，那么当前页面的tabBar不会受到影响。

• 坑3：tabBarItem的text属性不能动态修改。

tabBarItem的text属性只能在创建tabBar的时候设置，如果我们在代码里修改tabBarItem的text属性，那么这个修改不会生效。

总结

以上就是小程序动态设置tabBar的一些知识和踩坑案例。希望大家在使用动态设置tabBar的时候能够避免这些坑，并能够开发出更加优秀的微信小程序。