微信小程序-Tab标签

拼搏现实的明天。 2022-03-09 15:40 333阅读 0赞

index.wxml

index.wxss

.itemContent {
      margin-top: 20rpx;
      background: #fff;
      padding-bottom: 120rpx;
    }
    
    .swiper-tab {
      width: 100%;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      flex-flow: row;
      justify-content: center;
      color: #000;
      font-size: 36rpx;
      letter-spacing: 2rpx;
      margin-bottom: 30rpx;
    }
    
    .swiper-tab-item {
      color: #000;
    }
    
    .swiper-tab-item:first-child {
      margin-right: 50rpx;
    }
    
    .active {
      border-bottom: 10rpx solid #efe29e;
    }
    
    .show {
      display: block;
    }
    
    .hidden {
      display: none;
    }

index.js

Page({
      data: {
        currentTab: 0
      },
      //照片展示 服务说明Tab标签
      clickTab: function(e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      },
    })