微信小程序开发笔记(六)--实现tab选项卡

wxml：

<!-- pages/index/index.wxml -->
<!--导航菜单-->
<view class="navbar">
    <!--循环-->
    <view wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" bindtap="navbarTap">
        <view class="notice" wx:if="{{count[index]>0}}">{{count[index]}}</view>
        <text>{{item}}</text>
    </view>
</view>

<!--全部-->
<view hidden="{{currentTab !== 0}}">我是全部</view>

<!--支出-->
<view hidden="{{currentTab !== 1}}">我是支出</view>

<!--收入-->
<view hidden="{{currentTab !== 2}}">我是收入</view>

<!--其他-->
<view hidden="{{currentTab !== 3}}">我是其他</view>

js：

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navbar: ['全部', '支出', '收入', '其他'],
    count: [5, 2, 3, 0], //记录不同状态记录的数量
    currentTab: 0,
  },

  //响应点击导航栏
  navbarTap: function (e) {
    var that = this;
    that.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },

})

wxss：

/* pages/index/index.wxss */
/*圆点数字标注*/
.notice {
  width: 25rpx;
  height: 25rpx;
  color: #fff;
  text-align: center;
  background-color: #1DB1CF;
  border-radius: 50%;
  position: absolute;
  float: left;
  top: 5rpx;
  font-size: 20rpx;
  right: 30rpx;
  line-height: 25rpx;
}

/*顶部导航样式*/
.navbar {
  flex: none;
  display: flex;
  background: #fff;
}

.navbar .item {
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #666666;
}

.navbar .active {
  font-size: 40rpx;
  color: #1DB1CF;
}

.navbar .active:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: #1DB1CF;
}