微信小程序隐藏tabbar的几种实用技巧

哈喽大家好！近在鼓捣微信小程序，发现一个挺有意思的功能——隐藏tabbar！感觉有点小炫酷，所以想跟大家分享一下我的经验，顺便唠唠嗑。

其实一开始，我也被这个“隐藏tabbar”给整懵了。我的小程序页面嘛，设计得挺简单的，就是几个tab，用户点点就能切换页面。但是，有些页面，比如填写表单啊，或者看一些详情啊，底部的tabbar反而碍眼，影响用户体验。那咋办呢？总不能把tabbar整个砍掉吧？

后来琢磨琢磨，发现解决方法还挺多的，简单到让你怀人生的那种简单！

简单的办法，就是用跳转！对，你没听错，就是用wx.navigateTo这个API跳转到新页面。小程序自带的这个API，功能可强大了，它能跳转到不在tabbar里的页面。这样一来，新页面自然就没有tabbar了！是不是so easy？

当然，这只是个粗暴的办法，有些时候，我们想在同一个页面里，某些情况下显示tabbar，某些情况下隐藏tabbar。这时候，就需要点技巧了。

微信小程序官方提供了一个API：wx.hideTabBar()和wx.showTabBar()。这两个API就像魔法开关一样，可以控制tabbar的显示和隐藏。 wx.hideTabBar()可以把tabbar隐藏起来，wx.showTabBar()则可以把它重新显示出来。 而且，这两个API还支持动画效果呢！你可以在调用API的时候，设置animation: true参数，让tabbar的显示和隐藏更加平滑，用户体验更好。是不是感觉瞬间高大上了？

不过，我之前试过，直接在页面里调用wx.hideTabBar()，效果并不理想，有时候会卡顿，或者根本没反应。后来我发现，这是因为我页面加载速度太快了，wx.hideTabBar()还没来得及执行，页面就已经渲染完成了。所以，为了让wx.hideTabBar()更好地工作，我一般会在页面加载完成之后，用setTimeout数延迟一下再执行。

具体代码嘛，大概是这样的：

javascript

Page({

onLoad: function() {

setTimeout(() => {

wx.hideTabBar();

}, 500); //延迟500毫秒执行

// 其他代码

当然，500毫秒只是一个大概的数值，你可能需要根据你的页面加载速度来调整。

还有一种方法，就是自定义tabbar。自己动手丰衣足食嘛，哈哈！这个方法比较复杂，需要你创建一个自定义的tabbar组件，然后在需要隐藏tabbar的页面中，通过控制这个组件的显示与隐藏来间接控制tabbar的显示与隐藏。

这种方法的好处是，你可以完全自定义tabbar的样式和功能，让你的小程序看起来更酷炫，更符合你的设计理念。但是，缺点也很明显，就是比较费时费力，需要你对小程序的组件开发有一定的了解。

自定义tabbar其实跟之前的方法结合起来用效果更好，比如我在自定义tabbar组件中添加一个show属性，通过控制这个属性来控制tabbar的显示隐藏，然后在页面中用wx.hideTabBar()和wx.showTabBar()来配合，就能实现更精细的控制。

我感觉用自定义tabbar配合wx.hideTabBar()和wx.showTabBar()简直就是绝配！

隐藏tabbar的方法有很多，选择哪种方法取决于你的具体需求和技术能力。如果你只是想简单的隐藏一些页面中的tabbar，直接使用wx.navigateTo跳转到新页面就足够了。如果需要更精细的控制，或者需要自定义tabbar的样式和功能，那么自定义tabbar配合wx.hideTabBar()和wx.showTabBar()就是佳选择了。

为了更清晰的对比，我整理了一个

我想问问大家，你们在开发小程序的时候，都遇到过哪些关于tabbar的难题？或者，你们有没有什么更好的隐藏tabbar的方法？欢迎大家在评论区分享你们的经验和想法！ 让我们一起学习，一起进步！