自定义一个微信小程序tabBar，切换不闪烁，逻辑简单

自定义微信小程序tabBar，切换效果不会闪烁，逻辑上简单易懂，适合新手。

微信小程序官方有提供了一个tabBar，实现底部导航栏的功能，虽然简单易用，但无奈限制条件有点多，不适合很多情况。

本来打算参考网友的写法实现自定义tabBar，但搜索了一下，有的虽然实现了，但切换的时候会有闪烁的效果，体验不佳。有的可以做到切换不闪烁，但是逻辑上稍微有点复杂。（也许是我懒得搜索更多，所以自己琢磨了一下，写了一个简单的实现方法）

一、效果图：

二、主要的实现逻辑：
1、wxss页：通过弹性布局flex，将导航栏控制在页面底部；
2、js页：绑定事件，动态捕获点击元素的data-id，并根据捕获到的data-id，设置data里某个数据；
3、wxml页：调用js页面数据，动态设置对应元素的类名class。

写得好像有点难理解，其实就是先写好一个激活样式active，一个默认样式default，通过类选择器class='active’或者class='default’来控制样式。并且写死对应元素的data-id的值，但用户点击的时候，捕获到data-id的值，我们就知道用户点击的是哪一个了，这时候把它的类名class设置为active，其他的设置为default就能实现样式切换了。

三、具体代码：
1、wxml代码

<!--pages/myindex/class/cHealth/exams/start/doingExam/test/test2/test2.wxml-->
<view class="nav-tabs">
  <view class="{{options.A}}" data-id="A" bindtap="mySelected">
    <view class="image-view"><image src="/images/tabBar-0.png" mode="widthFix"></image></view>
    <view>考试记录</view>
  </view>
  <view class="{{options.B}}" data-id="B" bindtap="mySelected">
    <view class="image-view"><image src="/images/tabBar-1.png" mode="widthFix"></image></view>
    <view>错题集</view>
  </view>
  <view class="{{options.C}}" data-id="C" bindtap="mySelected">
    <view class="image-view"><image src="/images/tabBar-2.png" mode="widthFix"></image></view>
    <view>成绩增长</view>
  </view>
</view>

2、wxss代码

/* pages/myindex/class/cHealth/exams/start/doingExam/test/test2/test2.wxss */
page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nav-tabs {
  width: 100%;
  height: 120rpx;
  display: flex;
  position: fixed;
  bottom: 0;
}
image{
  padding-top: 10rpx;
  width: 50rpx;
  height: 50rpx;
}
.default {
  line-height: 40rpx;
  text-align: center;
  flex: 1;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 28rpx;
}
.active {
  line-height: 40rpx;
  text-align: center;
  color: #04DCA4;
  flex: 1;
  border: 1px solid #04DCA4;
  font-weight: bold;
  font-size: 28rpx;
  background-color: grey;
  border-radius: 5px;
}

3、js代码

// pages/myindex/class/cHealth/exams/start/doingExam/test/test2/test2.js
Page({
  data: {
    // options用于设置控件的wxss样式
    options: {
      A: 'active',
      B: 'default',
      C: 'default',
    },
  },
  onLoad: function (options) {

  },
  mySelected: function(e){
    var d = e.currentTarget.dataset
    var that = this; 
    console.log(d.id)
    if(d.id=='A'){
      that.setData({
        options: {'A': 'active', 'B': 'default', 'C':'default'}
      })
    }
    else if(d.id=='B'){
      that.setData({
        options: { 'A': 'default', 'B': 'active', 'C': 'default' }
      })
    }
    else if(d.id=='C'){
      that.setData({
        options: { 'A': 'default', 'B': 'default', 'C': 'active' }
      })
    }
  },

四、如果你缺少小图标icon，可以上阿里官方的图标库，免费下载
阿里图标库