<!-- 课程详情 选项卡 开始-->//html<view class="swiper-tab">
    <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><!-- 内容转换区 开始 --><swiper class='swiper-box' current="{{currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item catchtouchmove="stopTouchMove"><view>全部</view></swiper-item>
    <swiper-item catchtouchmove="stopTouchMove"><view>提现中</view></swiper-item>
    <swiper-item catchtouchmove="stopTouchMove"><view>已提现</view></swiper-item>
    <swiper-item catchtouchmove="stopTouchMove"><view>已提现</view></swiper-item>
    </swiper> <!-- 内容转换区 结束 -->//css
.swiper-tab {
   width: 100%;
   text-align: center;
   line-height: 80rpx;
   background-color:white;
   position: fixed;
   top:420rpx;
   left:0rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
 }
.swiper-tab-item{
   width: 25%; 
   font-size: 32rpx;
   color:#434343;
  }
  .active{
     color:#027ee7;
     border-bottom: 3rpx solid #027EE7;
  }
 .swiper-box {
   width:100%;
   height:100%;
   position: fixed;
   top: 504rpx;
   left: 0rpx;
 }

//js
  Page({

 /*页面的初始数据 */
 data: {
   currentTab: 0
 },
 //禁止选项卡的左右滑动 
 stopTouchMove: function () {
   return false;
 },
 // 选项卡转换
 clickTab: function (e) {
   var that = this;
   if (this.data.currentTab === e.target.dataset.current) {
     return false;
   } else {
     that.setData({
       currentTab: e.target.dataset.current
     })
   }
 },

作者：释怀Believemin
链接：https://www.jianshu.com/p/a3507518aaa2