微信小程序的开发之底部栏模块

写过小程序的同伴们应该知道在官方可以在app.json中进行项目的基本配置中进行底部栏的设置，但是对于设置好的底部栏我们不好进行修改操作，加上ui图给的不一致或者是有的页面不需要底部栏的情况下，那我们就不好在基础配置进行底部栏的配置了~故只能自己手动配置底部栏了

wxml

<!-- tabbar  -->
<template name='tabbar'>
  <view  class='tabbar'>
    <navigator data-tab='0' bindtap='tabIndex' data-href = '/pages/index/index'>
      <image src='../../images/1.png' hidden='{{_tabIndex == 0}}'></image>
      <image src='../../images/1_1.png' hidden='{{_tabIndex != 0}}'></image>
      <text class="{{_tabIndex==0? 'active':''}}">首页</text>
    </navigator>
    <navigator data-tab='1' bindtap='tabIndex' data-href = '/pages/news/index' >
      <image src='../../images/2.png' hidden='{{_tabIndex == 1}}'></image>
      <image src='../../images/2_1.png' hidden='{{_tabIndex != 1}}'></image>
      <text class="{{_tabIndex==1? 'active':''}}">分页</text>
    </navigator>
    <navigator data-tab='2' bindtap='tabIndex' data-href = '/pages/custom/index' hidden='{{status}}' >
      <image src='../../images/3.png' hidden='{{_tabIndex == 2}}'></image>
      <image src='../../images/3_1.png' hidden='{{_tabIndex != 2}}'></image>
      <text class="{{_tabIndex==2? 'active':''}}">分页</text>
    </navigator>
    <navigator data-tab='3' bindtap='tabIndex' data-href = '/pages/user/index' >
      <image src='../../images/4.png' hidden='{{_tabIndex == 3}}'></image>
      <image src='../../images/4_1.png' hidden='{{_tabIndex != 3}}'></image>
      <text class="{{_tabIndex==3? 'active':''}}">分页</text>
    </navigator>
  </view>
</template>

wxss

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

page {
  background-color: #f1f1f1;
}

.menu-item{  
  width: 32%;  
  float: left;  
  text-align: center;  
  padding-top: 8px;  
}  
.menu-item2{  
  width: 24%;  
  float: left;  
  text-align: center;  
  padding-top: 8px;  
}  
.img{  
  width: 23px;  
  height: 23px;  
  display: block;  
  margin:auto;  
}  
.clear{  
  clear: both;  
}  
.tab-bar{  
  position: fixed;  
  width: 100%;  
  padding: 0px 2%;  
}

---

这样我们在使用公共底部栏的时候就需要进行调用了

<!-- tabbar  -->
<import src ="../tabbar/index.wxml"/>
<template is="tabbar" data="{{_tabIndex}}" />

js

/**
   * 页面的初始数据
   */
  data: {
    _tabIndex: 对应页面的下标值,     // tabbar初始化状态
  }，

  /**
   * 点击切换
   */
  tabIndex: function (event) {
    page = 1;
    hadLastPage = false;
    wx.navigateTo({
      url: event.currentTarget.dataset.href,
    });
  }