自定义微信小程序 tabbar Demo
Clone or download
Latest commit bf95cf6 Dec 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea project init Nov 27, 2018
pages update Dec 9, 2018
utils project init Nov 27, 2018
README.md Update README.md Dec 22, 2018
app.js project init Nov 27, 2018
app.json project init Nov 27, 2018
app.wxss project init Nov 27, 2018
project.config.json update Dec 9, 2018

README.md

微信小程序自定义 tabbar

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

其他

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

文件构成

具体结构如图:

加载显示

如果希望每次点击 icon 都刷新页面,将 index.wxmlhidden 变为 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 😊