微信小程序自定义tab页切换展示功能

文件结构 

代码

<view class="checktabs">
  <view class="item">
    <view class="{{isTabs == 1 ? 'active' : ''}}" data-flag="1" bindtap="checkTap">
      <image src="{{isTabs ==1 ? './czy.png' : './czn.png'}}" class="czr"></image>
      <text class="{{isTabs == 1 ? 'activeCol' : ''}}">常住人</text>
    </view>
    <view class="{{isTabs == 2 ? 'active' : ''}}" data-flag="2" bindtap="checkTap">
      <image src="{{isTabs ==2 ? './fky.png' : './fkn.png'}}" class="fkr"></image>
      <text class="{{isTabs == 2 ? 'activeCol' : ''}}">访客</text>
    </view>
  </view>
  
  <view hidden="{{!(isTabs == 1)}}">
      <text>我是常住人</text>
    </view>
    <view hidden="{{!(isTabs == 2)}}">
      <text>我是访客人</text>
    </view>
</view>

Page({
  data: {
    isTabs:1,
  },


  checkTap(e) {
    console.log(e.currentTarget.dataset.flag);
    this.setData({
      isTabs:e.currentTarget.dataset.flag
    })
  },

})

page {
  background: #F9F9F9;
}

image {
  vertical-align: middle;
}

.czr {
  width: 30rpx;
  height: 34rpx;
}

.fkr {
  width: 34rpx;
  height: 38rpx;
}

.checktabs {
  background: #fff;
  width: 88%;
  height: 600rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  overflow: hidden;
}

.item {
  display: flex;
  justify-content: space-around;
  background-color: #DAE6FB;
  line-height: 100rpx;
}

.item text {
  font-size: 30rpx;
  font-weight: 500;
  color: #5D677E;
  padding-left: 10rpx;
}

.active {
  border-bottom: 4rpx solid #426DFF;
}
.activeCol{
  color: #426DFF !important;
}