小程序tab选项卡

小程序tab选项卡_第1张图片
html:

<view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">111111view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">222222view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">333333view>
  view>


  
    <scroll-view>
      <text>111111text>
    scroll-view>
  view>
  
    <scroll-view>
      <text>222222text>
    scroll-view>
  view>
  
    <scroll-view>
      <text>333333text>
    scroll-view>
  view>

js:

  data: {
    currentTab: 0,
  },

  //点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }
  },

css:

.about_page{
  margin: 0 10px;
}
.swiper-tab{
  width: 100%;
  /* border-bottom: 2rpx solid #ccc; */
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  color: #ccc;
  font-size: 16px;
}
.swiper-tab-item{
  width: 30%; 
  color:#434343;
}
.active{
  color:#F65959;
  /* border-bottom: 4rpx solid #F65959; */
  font-size: 16px;
  font-weight: bold;
}
.juzhong{
  margin: 0 auto;
}
.domain{
  background-color: #fff;
  height: 100%;
  margin:0 10px;
}
.show{
  display: block;
}
.hidden{
  display: none;
}

你可能感兴趣的:(小程序,小程序tab选项卡)