小程序 tab标签+轮播图

<!-- 更多信息 begin-->
  <view class="patient">
    <view class="patient-status">
      <van-tabs active="{{ active }}" 
         bind:change="onChangeTab" 
         color="#4DC9CD" 
         title-active-color="#4DC9CD"
         class="patient-tab">
        <van-tab title="待接诊" info="{{waitNum}}"></van-tab>
        <van-tab title="进行中" info="{{processNum}}"></van-tab>
      </van-tabs>
      <view class="patient-right">
        <text class="patient-more">更多</text>
        <van-icon name="arrow" size="25rpx" />
      </view>
    </view>
  
    <view class="patient-wrap">
      <!-- 轮播图 begin-->
      <swiper 
          indicator-dots="{{indicatorDots}}" 
          interval="{{interval}}" 
          duration="{{duration}}" 
          class="patient-swiper" 
          wx:if="{{waitAdmissionList.length>0 || processingList.length>0}}"
          indicator-color="{{indicatorColor}}" 
          indicator-active-color="{{indicatorActivecolor}}">
        <block  wx:for="{{active == 0 ? waitAdmissionList : processingList}}" wx:key="index" wx:for-item="JsonArray">
          <swiper-item class="banneritem" >
            <view style="display:flex">
              <view class="patient-info"  wx:for="{{JsonArray}}" wx:key="index"  id="{{item.id}}">
                <image src="{{item.inquiryImgUrl}}" class="other-img"></image>
                <text class="patient-name">{{item.xm}}</text>
                <text class="patient-type">病种：{{item.diseasesName}}</text>
                // filter.formatTime - wxml格式化时间
                <text class="patient-data">{{filter.formatTime(item.yyrq, 'yyyy-MM-dd')}}</text>
                <text class="patient-time">{{item.yysj}}</text>
                <van-button round 
                    color="{{item.yylbdm === '1' ? '#3EBFC6' : item.yylbdm === '2' ? '#61A6FF' : '#FE6D34'}}" 
                    plain size="small" 
                    data-fwlx="{{item.yylbdm}}" 
                    id="{{item.id}}" 
                    data-jzrid="{{item.jzrid}}">{{active == 0 ? '接诊': '进入诊室'}}
              </van-button>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>
      <view wx:else>
        <image src="https://xxx/admission.png" class="patient-img"/>
        <view class="patient-content">暂无接诊消息</view>
      </view>
      <!-- 轮播图 end-->
    </view>
  </view>
  <!-- 更多信息 end-->

filter.formatTime - wxml格式化时间，见格式化时间的二种方法博客https://www.jianshu.com/p/c41c5c1e5242

page({
  data:{
    active: 0,
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 500,
    indicatorColor: '#999999',
    indicatorActivecolor: '#89CCCE',
    waitNum: '', //显示待接诊数量
    processNum: '', //显示进行中数量
    waitNumInfo: [],
    processNumInfo: [],
    inquiryImgUrl: '', // 图片路径
    waitAdmissionList: [], // 待接诊
    diseasesName: '', // 疾病名称
  }，

 // tab切换
  onChangeTab:function(event){
    let tabChange = event.detail.title
    if(tabChange == '进行中'){
      this.getProcessing()
      this.setData({ active: 1 });
    } else {
      this.getWaitAdmission()
      this.setData({ active: 0 });
    }
  },
// 一维数组转换为二维数组 
  arrTrans :function(num, arr){ 
    const iconsArr = []; // 声明数组
    arr.forEach((item, index) => {
      const page = Math.floor(index / num); // 计算该元素为第几个数组内
      if (!iconsArr[page]) { // 判断是否存在
        iconsArr[page] = [];
      }
      iconsArr[page].push(item);
    });
    return iconsArr;
  },
// 待接诊
  getWaitAdmission:function(){
    $http.request('/api/xxx',{
      ksbm: wx.getStorageSync('ksuuid')
    },'GET').then(res => {
      if(res.success){
        // 获取待接诊数量
        this.setData({ waitNum: res.data.zsysl });
        // 获取待接诊信息
        this.waitNumInfo = res.data.register || [];
        
        if(item.jbmc == ''){
           item.diseasesName = '其它疾病'
        } else {
           item.diseasesName = item.jbmc
        }

        if(this.waitNumInfo.length > 0){
          this.waitNumInfo.forEach(item => {
            if(item.yylbdm === '1'){
              item.inquiryImgUrl = 'https://xxx/graphic-inquiry.png'
            }else if(item.yylbdm === '2'){
              item.inquiryImgUrl = 'https://xxx/video-inquiry.png'
            }
          })
        }
        // 每3条数据为一个轮播，我这里后端只返回了9条数据，因为我们这里只展示这么多
        this.waitAdmissionList = this.arrTrans(3,this.waitNumInfo).slice(0,3)
        this.setData({ 
          waitAdmissionList: this.waitAdmissionList,
          diseasesName: this.diseasesName,
        })
      }
    })
  },
})

// 这里只展示中间轮播图这块的样式
.patient{
  background: #FFFFFF;
  border-radius: 10px;
  margin: 30rpx;
}
.patient-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 480rpx;
}
.patient-swiper{
  width: 100% !important;
  height: 440rpx !important;
}
.banneritem{
  width: 100%;
}
.patient-info{
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-right: 1rpx solid #F5F5F5;
}