zb616/wx-diy-tabbar

自定义微信小程序 tabbar Demo

微信小程序自定义 tabbar

由于之前博客讲得比较杂乱，后来重新整理了一下代码结构，新建了一个 Demo 小程序。

其他

如果您希望制作可以左右滑动的带 swiper 效果的 tabbar，可以查看另外一个 Demo

文件构成

具体结构如图:

加载显示

如果希望每次点击 icon 都刷新页面，将 index.wxml 的 hidden 变为 wx:if，逻辑和 hidden 相反即可。具体差异见下方。

加载一次

<view hidden="{{currentTab == 0? false: true}}">
  <component_index/>
</view>
<view hidden="{{currentTab == 1? false: true}}">
  <component_car/>
</view>
<view hidden="{{currentTab == 2? false: true}}">
  <component_my/>
</view>

每次点击加载

<view wx:if="{{currentTab == 0}}">
  <component_index/>
</view>
<view wx:if="{{currentTab == 1}}">
  <component_car/>
</view>
<view wx:if="{{currentTab == 2}}">
  <component_my/>
</view>

实现效果

如果这个 Demo 能够帮助到您。请不要吝惜您的 Star 😊。