小程序选项卡

wxml

---

<view style="background: #fff;">

  <view class="swiper-tab">

    <view class="swiper-tab-item" data-current="0" bindtap="clickTab">

      门店环境

      <i class=" {{currentTab==0?'active':''}}"></i>

    </view>

    <view class="swiper-tab-item" data-current="1" bindtap="clickTab">

      团队风采

      <i class=" {{currentTab==1?'active':''}}"></i>

    </view>

  </view>

  <view class="{{currentTab==0 ? 'show':'hidden'}}">

    <scroll-view>

      <view class="swiperitems">

        <image class="" src="../../images/icon_chaoshi.png"></image>

        <image class="" src="../../images/icon_chaoshi.png"></image>

      </view>

    </scroll-view>

  </view>

  <view class="{{currentTab==1 ? 'show':'hidden'}}">

    <scroll-view>

      <view class="swiperitems">

        <image class="" src="../../images/icon_ertong.png"></image>

      </view>

    </scroll-view>

  </view>

</view>

js

---

data {

currentTab: 0

},

//滑动切换

  swiperTab: function (e) {

    var that = this;

    that.setData({

      currentTab: e.detail.current

    });

  },

  //点击切换

  clickTab: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {

      return false;

    } else {

      that.setData({

        currentTab: e.target.dataset.current

      })

    }

  },

wxss

---

.swiper-tab-item{

  display: inline-block;

  width: 50%;

  color:#333;

}

 i.active{

display: block;

border-bottom: 6rpx solid #00B1C5;

width: 60rpx;

margin-left: 62rpx;

}

.about_page{

  margin: 0 10px;

}

.swiper-tab{

  width: 50%;

  /* border-bottom: 2rpx solid #ccc; */

  text-align: center;

  height: 50rpx;

  line-height: 50rpx;

  display: flex;

  flex-flow: row;

  justify-content: space-between;

  color: #ccc;

  font-size: 16px;

  background: #fff;

}

.swiper-tab-item{

  width: 50%; 

  color:#333;

}

.juzhong{

  margin: 0 auto;

}

.domain{

  background-color: #fff;

  height: 100%;

  margin:0 10px;

}

.show{

  display: block;

  margin: 26rpx 30rpx;

}

.hidden{

  display: none;

}

.swiperitems {

background: #fff;

  margin: 24rpx 40rpx;

}

.swiperitems image {

  margin: 0 auto 20rpx;

  width: 100%;

}

效果

---