小程序简单版tab切换

 1 需要点击的按钮

<view class='content'> 
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">電源</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">空調</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">電視</view>
    <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">窗簾</view>
  </view>

 2 切换的内容部分

<block>
    <view class = "{{currentTab == 0 ? 'show':'hidden'}}" >
      <scroll-view>
        <text>暂无内容1</text>
      </scroll-view>
    </view>
    <view class = "{{currentTab == 1 ? 'show':'hidden'}}" >
      <scroll-view>
        <text>暂无内容2</text>
      </scroll-view>
    </view>
    <view class = "{{currentTab == 2 ? 'show':'hidden'}}">
      <scroll-view>
        <text>暂无内容3</text>
      </scroll-view>
    </view>
    <view class = "{{currentTab == 3 ? 'show':'hidden'}}">
      <scroll-view>
        <text>暂无内容4</text>
      </scroll-view>
    </view>
  </block>

3 js部分

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

4 样式

今天这款tab切换是通过显示隐藏实现的简单版本

.show{
  display: block;
}
.hidden{
  display: none;
}

剩余样式依据自己喜好修改修改

 

感谢大家参谋 有什么不懂得 评论区 私信我 都可以哦