uniapp里tabs类似与（全部、待付款、已付款等）

先看效果图：

 

接下来看vue代码： 

<template>
   <view class="my-release">
      <view class="bg"></view>
      <view class="tabs">
         <u-tabs
            :list="tabsList" 
            :scrollable='false' 
            lineColor="#FF3F3D" 
            :activeStyle="{color:'#FF3F3D'}"
            :inactiveStyle="{color:'#898989'}"
            @change="change"
         ></u-tabs>
      </view>
      
      <view v-for="(item,index) in typeList" :key="index">
         <view class="box-item">
            <view class="item-up">
               <view class="item-up-type">{{ item.type }}</view>
               <view class="finish" v-if="item.status == 1">
                  显示中
               </view>
               <view :class="item.status == 2 ? 'red-font' : 'finish' " 
                  v-if="item.status == 2">
                  待审核
               </view>
               <view class="finish" v-if="item.status == 3">
                  已过期
               </view>
            </view>
            
            <view class="item-down">
               <view class="item-text1">
                  <text>{{item.text}}</text>
                  <text>手机号:{{item.phone}}</text>
               </view>
               
               <!-- 图片 -->
               <view class="item-imgs">
                  <image 
                     class="item-img" 
                     v-for="(k,i) in item.imgList" 
                     :key="i" 
                     :src="k.imgUrl" 
                     mode="widthFix"
                  ></image>
               </view>
               <view class="item-text2">
                  发布时间：{{item.time}}分钟前
               </view>
            </view>
            
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            tabsList: [
               { name: '全部' },
               { name: '显示中' },
               { name: '待审核' },
               { name: '已过期' }
            ],
            
            typeList: '',   //显示的状态列表
            allList: [      //全部状态列表
               {
                  type: '机械出租',
                  text: '找机械制图人员一名，懂图纸能分解图纸，制图。工资待遇详谈。',
                  phone: '18811111111',
                  imgList: [
                     {imgUrl: '/static/img/img3.png'}, // 图片1
                     {imgUrl: '/static/img/img3.png'}, // 图片2
                     {imgUrl: '/static/img/img3.png'}, // 图片3
                  ],
                  time: '50',
                  status: 2  //待审核
               },
               {
                  type: '电工电料',
                  text: '找机械制图人员一名，懂图纸能分解图纸，制图。工资待遇详谈。',
                  phone: '18811111111',
                  time: '50',
                  status: 3  //已过期
               },
               {
                  type: '五金机电',
                  text: '找机械制图人员一名，懂图纸能分解图纸，制图。工资待遇详谈。',
                  phone: '18811111111',
                  imgList: [
                     {imgUrl: '/static/img/img3.png'}, // 图片1
                     {imgUrl: '/static/img/img3.png'}, // 图片2
                     {imgUrl: '/static/img/img3.png'}, // 图片3
                  ],
                  time: '50',
                  status: 3  //已过期
               },
               {
                  type: '消防器械',
                  text: '找机械制图人员一名，懂图纸能分解图纸，制图。工资待遇详谈。',
                  phone: '18811111111',
                  time: '50',
                  status: 1   //显示中
               },
               {
                  type: '金属配件',
                  text: '找机械制图人员一名，懂图纸能分解图纸，制图。工资待遇详谈。',
                  phone: '18811111111',
                  time: '50',
                  status: 2  //待审核
               },
               {
                  type: '直达家门',
                  text: '找机械制图人员一名，懂图纸能分解图纸，制图。工资待遇详谈。',
                  phone: '18811111111',
                  time: '50',
                  status: 1  //显示中
               },
            ]
         }
      },
      onLoad() {
         this.typeList = this.allList
      },
      methods: {
         change(e) {
            // console.log(e);  
            if ( e.index == 0 ) {
               this.typeList = this.allList;
            } else {
               this.typeList = [];
               for (var i = 0; i < this.allList.length; i++) {
                  if (this.allList[i].status == e.index) {
                     console.log(this.allList[i]);
                     this.typeList.push(this.allList[i]);
                  }
               }
            }
         }
      }
   }
</script>

<style scoped>
   .bg {
      position: fixed;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #f6f6f6;
      z-index: -1;
   }
   .tabs{
      width: 100%;
      background-color: #FFFFFF;
   }

   .box-item{
      background-color: #FFFFFF;
      margin: 20rpx auto;
      padding: 30rpx 32rpx 38rpx 33rpx;
   }
   
   /* 上 */
   .item-up{
      display: flex;
      justify-content: space-between;
   }
   .item-up-type {
      width: 110rpx;
      height: 36rpx;
      line-height: 36rpx;
      color: white;
      text-align: center;
      font-size: 20rpx;
      border-radius: 10rpx;
      background-color: #FF3F3D;
   }
   .red-font {
      font-size: 22rpx;
      color: #FF3F3D;
   }
   .finish{
      font-size: 22rpx;
   }
   
   /* 下 */
   .item-down{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
   }
   .item-text{
      display: flex;
      justify-content: space-between;
   }
   .item-text1{
      font-size: 28rpx;
      padding-top: 30rpx;
   }
   .item-text2{
      font-size: 24rpx;
      color: #999999;
   }
   
   /* 图片 */
   .item-imgs{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24rpx;
   }
   .item-img{
      width: 218rpx;
      height: 170rpx;
      padding-bottom: 27rpx;
   }

</style>