自封微信小程序选项卡Tab功能，支持多个滑动切换

1.静态的支持两个切换

	<view  class="option-box">
				<view class="swiper-tab"> 
          <view class="swiper-tab-list {{currentTab==0 ? 'on' : 'off'}}" data-current="0" bindtap="swichNav">互联网医院
          </view> 
          <view class="swiper-tab-list {{currentTab==1 ? 'on' : 'off'}}" data-current="1" bindtap="swichNav">患者便利服务</view> 
        </view > 
        <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px;" bindchange="bindChange"> 
            <!-- 互联网医院 -->
                <swiper-item> 
                  <view style="width: 100%;display: flex;justify-content: space-between;" class="grid-box">
                     <view class="line-box" bindtap="gotoYh">
                        <image src="/assets/img/home/sbbx-new.png" mode="heightFix" style="width: 45rpx;height: 45rpx;vertical-align:top;" />
                        <view class="grid-title">上门护理</view>
                     </view>
                     <view class="line-box" bindtap="gotoWebs">
                        <image src="/assets/img/home/ymp-new.png" mode="heightFix" style="width: 45rpx;height: 45rpx;vertical-align:top;" />
                        <view class="grid-title">医名片</view>
                     </view>
                     <view class="line-box" bindtap="gotoIncharge">
                      <image src="/assets/img/home/zyfcz-new.png" mode="heightFix" style="width:  45rpx;height: 45rpx;vertical-align:top;" />
                        <view class="grid-title">住院预交金充值</view>
                     </view>
                     <view class="line-box" bindtap="goConsumeList">
                      <image src="/assets/img/home/zyqd-new.png" mode="heightFix" style="width: 45rpx;height:  45rpx;vertical-align:top;" />
                        <view class="grid-title">住院清单</view>
                     </view>
                     <view class="line-box" bindtap="gotoPayRecord">
                      <image src="/assets/img/home/jfjl-new.png" mode="heightFix" style="width:  45rpx;height:  45rpx;vertical-align:top;" />
                        <view class="grid-title">缴费记录</view>
                     </view>
                     <view class="line-box" bindtap="gotoSbbx" >
                      <image src="/assets/img/home/sbbx-new.png" mode="heightFix" style="width:  45rpx;height:  45rpx;vertical-align:top;" />
                        <view class="grid-title">商保报销</view>
                     </view>
                     <view class="line-box" bindtap="gotoConsultInfo">
                      <image src="/assets/img/home/zxjl-new.png" mode="heightFix" style="width:  45rpx;height: 45rpx;vertical-align:top;" />
                        <view class="grid-title">咨询记录</view>
                     </view>
                     <view class="line-box" bindtap="goRecharge">
                        <image src="/assets/img/home/jzkcz-new.png" mode="heightFix" style="width:  45rpx;height: 45rpx;vertical-align:top;" />
                        <view class="grid-title">就诊卡充值</view>
                     </view>
                  </view>
                 </swiper-item> 
              <!-- 便民服务 -->
			          <swiper-item>
                  <view>
                        患者便利服务
                  </view>
                </swiper-item> 
			    </swiper> 
			</view>

   

.option-box{
  border: 2rpx solid #eae9e9; 
  border-radius: 40rpx;
}
.swiper-tab{ 
  width: 100%; 
  background-color: #f3f3f3;
  border-radius: 40rpx;
  text-align: center; 
  line-height: 80rpx;
} 
.swiper-tab-list{ 
  font-size: 30rpx; 
  display: inline-block; 
  width: 50%; 
  color: #777777; 
} 
.on{ 
  color: #fff;  
  /* border-bottom: 5rpx solid #da7c0c; */
  background-color: #459bde;
  border-radius: 40rpx;
} 
.off{
  background-color: #f3f3f3;
  border-radius: 40rpx;
  border-right: 40rpx;
  color: #a7b6c4;
}
.swiper-box{ 
  display: block; 
  height: 100%;
  width: 100%; 
  overflow: hidden; 
} 

page({
  data(){
      currentTab: 0, 
 
  }
})
 /** 
  * 点击tab切换 
  */ 
// data-current="0" 标签中的自定义属性,可以在e.target.dataset中获取到
 swichNav: function( e ) { 
   console.log(e)
  if( this.data.currentTab === e.target.dataset.current ) { 
   return false; 
  } else { 
    this.setData( { 
      currentTab: e.target.dataset.current 
    }) 
  } 
 },

2.支持滑动的选项卡

  

      <view style="width:100%;display:flex;justify-content:space-between;">
        <view style="width: 75%;display:flex;padding: 0 20rpx;height:70rpx;" class="tuijian">
          <view class="swiper-tabs" wx:for="{{doctorTabList}}" wx:key="item"> 
          <!--  item.num==index? 'ons' : 'offs'-->
            <text class="swiper-tab-lists {{item.num==doctorTab? 'ons' : 'offs'}}"  bindtap="swichNavs" data-name="{{item.num}}" data-id="{{item.Id}}">{{item.Fullname}}
            </text>  
          </view> 
        </view>
        <view style="margin-right: 30rpx;">
          <image src="/assets/img/home/more.png" mode="widthFix" style="width: 38rpx;height: 38rpx;vertical-align:top;margin:7px 10rpx 0 15rpx;" />
          <text  class="more-list" bindtap="moreDoctorList">更多</text>
        </view>
      </view>

  

     <view style="width:100%;display:flex;justify-content:space-between;">
        <view style="width: 75%;display:flex;padding: 0 20rpx;height:70rpx;" class="tuijian">
          <view class="swiper-tabs" wx:for="{{doctorTabList}}" wx:key="item"> 
          <!--  item.num==index? 'ons' : 'offs'-->
            <text class="swiper-tab-lists {{item.num==doctorTab? 'ons' : 'offs'}}"  bindtap="swichNavs" data-name="{{item.num}}" data-id="{{item.Id}}">{{item.Fullname}}
            </text>  
          </view> 
        </view>
        <view style="margin-right: 30rpx;">
          <image src="/assets/img/home/more.png" mode="widthFix" style="width: 38rpx;height: 38rpx;vertical-align:top;margin:7px 10rpx 0 15rpx;" />
          <text  class="more-list" bindtap="moreDoctorList">更多</text>
        </view>
      </view>
      <!-- 儿科 -->
			<view class="swiper_box" wx:if="{{saveDoctorTab==doctorTab}}"> 
          <swiper wx:if="{{dataList != null}}" class="swiper" autoplay="true" interval="3000" circular="true" previous-margin="2px" next-margin="68px" duration="1000" display-multiple-items="2" bindchange="onSwiperChange" current="{{currentTab}}" >
            <swiper-item wx:for="{{dataList}}" wx:key="index">
              <view class="item" :class="{ active: swiperIndex == index || (swiperIndex == index-1) || (swiperIndex == doclistInfo.length - 1 && index == 0)}" bindtap="onClick" data-item="{{item}}">
                <network-image height="290rpx" style="width: 100%;border-radius: 16rpx 16rpx 0 0;" iscircle="{{false}}" src="{{item.HeadImageUrl}}" errsrc="/assets/img/hb-doctor.png" mode="widthFix"></network-image>
                <view class="title">
                  <text class="name">{{item.EmployeeName}}</text>
                </view>
                <view class="desc van-multi-ellipsis--l2">
                  <text class="yishi">{{item.DepartmentText}}</text>
                  <text class="position">{{item.TitleText}}</text>
                </view>
              </view>
            </swiper-item>
        </swiper>
        <view wx:else class="flex-main-center pt20 pb20 color-9">暂无推荐医生</view>
			</view>
    </view>

  

page({
  data(){
   doctorTab:0,
   doctorTabList:[],  //获取所有科室的信息，通过调取接口
   saveDoctorTab:0,
  }
})

/** 
  * 点击tab切换 
  */ 
 swichNavs: function( e ) { 
  console.log(e)
  let tab= e.target.dataset.name  
  let id= e.target.dataset.id
  this.setData( { 
    saveDoctorTab:tab
   }) 
   //点击科室选科室下的所有医生信息
   this.GetEmployeeInfoByDept(id)  
 if( this.data.doctorTab ===tab ) { 
  return false; 
 } else { 
   this.setData( { 
    doctorTab: tab 
   }) 
   console.log(this.data.doctorTab)
 } 
},

  css样式基本同上

代码切换思路同两个最简单的tab切换是一样的思路，只是加了个有些业务内容需要的组件；