小程序用swiper组件实现tab选项卡

下面直接上代码：

WXML代码：

<view class="container">  
  <view class="header">    
    <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>  
  </view>  
  <swiper class="swipermenu" current="{{currentTab}}" duration="300" bindchange="swiperTab">  
    <swiper-item>      
      <view class="swiper-menu-item" wx:for="{{doorplatepicture_data}}" wx:key="index">        
        <view class="content">          
          <view class="swiperImg"><image class="picture" src=""></image></view>          
          <view class="swiperText">            
             <view class="text1">{{item.content}}</view>           
             <view class="text2">              
               <view class="fl">采集人: {{item.name}}</view>              
               <view class="fr">{{item.date}}</view>           
             </view>          
          </view>        
        </view>      
      </view>    
    </swiper-item>    
    <swiper-item>      
      内容2  
    </swiper-item>  
  </swiper>
</view>

WXSS代码：

.container{  
  display: flex;
  height: 100%;  
  flex-direction: column; 
  align-items: center; 
  justify-content: space-between;
}
.fl{  
  float: left;
}
.fr{  
  float: right;
}
.header{  
  width:100%;  
  padding: 36rpx 0 24rpx 0;
}
.swiper-tab{  
  width: 686rpx;  
  margin: 0 auto;  
  text-align: center;  
  height: 88rpx;  
  line-height: 88rpx;  
  font-size: 34rpx;  
  display: flex;  
  flex-flow: row;  
  justify-content: space-between;  
  background-color: #EEF4FE;  
  border-radius: 8rpx;
}
.swiper-tab .swiper-tab-item{  
  width: 50%;  
  color: #999999;
}
.active{  
  color:#ffffff !important;  
  font-weight: bold;  
  border-radius: 8rpx;  
  background-color: #5497FA;
}
.swipermenu{  
  width: 100%;
  height: 1000rpx;
  display: flex;
} 
.swipermenu .swiper-menu-item{
  width: 100%;
  height: 160rpx;   
} 
.swipermenu .swiper-menu-item .content{
  width: 686rpx;
  height: 100%;
  margin: 0 auto; 
}
.swipermenu .swiper-menu-item .content .swiperImg{  
  height: 160rpx;
  width: 172rpx;
  padding: 24rpx 0;  
  box-sizing: border-box;  float: left; margin-right: 29rpx; 
} 
.swipermenu .swiper-menu-item .content .swiperImg .picture{  
  height: 100%;
  width: 100%;
  border-radius: 4rpx;
  background-color: #999999;   
}
.swipermenu .swiper-menu-item .content .swiperText{  
  width: 485rpx;
  height: 100%;
  float: left;
  padding: 24rpx 0;  
  box-sizing: border-box;
  border-bottom: 1rpx solid #E1E6EC; 
} 
.swipermenu .swiper-menu-item .swiperText .text1{   
  font-size: 28rpx;
  line-height: 31.5rpx; 
} 
.swipermenu .swiper-menu-item .swiperText .text2{  
  font-size: 22rpx;
  line-height: 22rpx;
  margin-top: 19rpx;
  color: #999999;
} 

js代码：

Page({  
  data: {    
    currentTab:0,    
    doorplatepicture_data:[{
      imgUrl:"",
      content:"华东村健康路1512号",
      name:"张三",
      date:"2020-10-13 12：12：12"
    },{
      imgUrl:"",
      content:"华东村健康路1512号",
      name:"张三",
      date:"2020-10-13 12：12：12"
    },{
      imgUrl:"",
      content:"华东村健康路1512号",
      name:"张三",
      date:"2020-10-13 12：12：12"
    },{
      imgUrl:"",
      content:"华东村健康路1512号",
      name:"张三",
      date:"2020-10-13 12：12：12"
    },{
      imgUrl:"",
      content:"华东村健康路1512号",
      name:"张三",
      date:"2020-10-13 12：12：12"
  }]
}, 
//滑动切换
swiperTab: function (e) {  
  var that = this;
  that.setData({
     currentTab: e.detail.current
  }); 
},
//点击切换
clickTab: function(e){
   var that = this;
   if(that.data.currentTab === e.target.dataset.current){     return false;
   }else{
     that.setData({       currentTab:e.target.dataset.current
    })  
   }
 },
})

注意：

由于小程序swiper组件的默认高度为150px，如果swiper中的内容过多，则会导致内容被遮盖，无法实现自适应。

解决方法：

如果swiper中的数据条数是固定的，且每条数据高度是一致的，则可以计算出具体高度，将swiper的高度设置成该值就行；如果swiper中数据条数不固定，但每条数据高度一致，则swiper的高度=内容条数*每条内容高度；如果数据条数不固定，且每条数据高度不一致，则可以使用scroll-view动态计算高度。