非swiper实现小程序的tab选项卡功能

WXML代码：

<view class="container">  
   <!-- tab选项卡标题 -->
  <view class="navbar">
    <text
     wx:for="{{navlist}}" data-index="{{index}}"
     class="{{currentIndex==index?'active':''}}"
     bindtap="navbarTab"
     wx:key="unique">
       {{item.name}}
    </text>
  </view>

  <!-- tab选项卡1内容 -->
  <view hidden="{{currentIndex!==0}}">
    <view
      class="tab_wrap"
      wx:for="{{tabContent1}}"
      wx:key="index">
        <view class="tab_image">
           <image src="{{item.imgUrl}}"></image>
        </view>
        <view class="tab_content">
           <view class="tab_con_title">{{item.content}}</view>
           <view class="tab_con_message">
             <text>{{item.name}}</text>
             <text>{{item.date}}</text>
           </view>
       </view>
    </view>
  </view>

  <!-- 选项卡2内容 -->
  <view hidden="{{currentIndex !==1}}">
    <view class="tab_wrap" wx:for="{{tabContent2}}" wx:key="index">
       <view class="tab_image">
         <image src="{{item.imgUrl}}"></image>
       </view>
       <view class="tab_content">
         <view class="tab_con_title">{{item.content}}</view>
         <view class="tab_con_message">
           <text>{{item.name}}</text>
           <text>{{item.date}}</text>
         </view>
       </view>
    </view>
  </view> 
</view>

WXSS代码：

.container{  
  display: flex;
  height: 100%;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-between;
}
.navbar{
  width: 686rpx;
  height: 88rpx;
  margin: 20rpx 0;
  display: flex;
  justify-content: space-between;
  background-color: #EEF4FE;
  border-radius: 8rpx;
}
.navbar text{
  display: block;
  width: 50%;
  height: 100%;
  line-height: 88rpx;
  font-size: 34rpx;
  color: #999999;
  text-align: center;
}
.active{
  color:#ffffff !important;
  font-weight: bold;
  border-radius: 8rpx;
  background-color: #5497FA;
}
.tab_wrap{
  width: 686rpx;
  height: 180rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
}
.tab_wrap .tab_image{
  width: 180rpx;
  height: 100%;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}
.tab_wrap .tab_image image{
  width: 100%;
  height: 100%;
  border-radius: 4rpx;
  background-color: #E1E6EC;
}
.tab_wrap .tab_content{
  width: 480rpx;
  height: 100%;
  border-bottom: 1rpx solid #E1E6EC;
}
.tab_wrap .tab_content .tab_con_title{
  width: 100%;
  height: 70rpx;
  line-height: 35rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}
.tab_wrap .tab_content .tab_con_message{
  font-size: 22rpx;
  height: 30rpx;
  line-height: 30rpx;
  color: #999999;
  display: flex;
  justify-content: space-between;
}

js代码：

Page({  
  data: {    
   // 选项卡标题
    navlist:[
      {id:0,name:'未采集'},
      {id:1,name:'已采集'}
    ],
    // 选项卡下标
    currentIndex:0,
    tabContent1:[
      {imgUrl:"",content:"选项卡内容1选项卡内容1选项卡内容1",name:"张三",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容1选项卡内容1选项卡内容1",name:"张三",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容1选项卡内容1选项卡内容1",name:"张三",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容1选项卡内容1选项卡内容1",name:"张三",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容1选项卡内容1选项卡内容1",name:"张三",date:"2020-10-13"},
    ],
    tabContent2:[
      {imgUrl:"",content:"选项卡内容2选项卡内容2选项卡内容2",name:"李四",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容2选项卡内容2选项卡内容2",name:"李四",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容2选项卡内容2选项卡内容2",name:"李四",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容2选项卡内容2选项卡内容2",name:"李四",date:"2020-10-13"},
      {imgUrl:"",content:"选项卡内容2选项卡内容2选项卡内容2",name:"李四",date:"2020-10-13"},
    ]
  },
  // 选项卡点击切换事件
  navbarTab: function (e) {
    let that=this
    if(that.data.currentIndex === e.currentTarget.dataset.index){
      return false;
    }else{
      that.setData({
        currentIndex: e.currentTarget.dataset.index
      });
     }
  },
})