微信小程序flex布局列表数据展现

page{
  background-color: #fff; 
 }
.top-bg{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 20rpx;
  background-color: #F2F2F2;
}
.box-list{
  margin-top: 20rpx;
}
.box-list .box-title-row{
  display: flex;
  font-size: 14px;
  line-height: 42px;
  border-bottom: 1px solid #F2F2F2;
  margin: 0 15rpx;
}
.box-list .box-data-row{
  display: flex;
  font-size: 12px;
  line-height: 42px;
  border-bottom: 1px solid #F2F2F2;
  margin: 0 15rpx;
}
.box-list .box-column1{
  flex: 0 0 160rpx;
  text-align: center;
}
.box-list .box-column2{
  flex: 0 0 160rpx;
  text-align: center;
}
.box-list .box-column3{
  flex: 0 0 120rpx;
  text-align: center;
}
.box-list .box-column4{
  flex: 0 0 150rpx;
  text-align: center;
}
.box-list .box-column-end{
  flex-grow: 1;
  text-align: center;
}
.statusF58B85{
  border: 1px solid #F58B85;
  font-size: 13px;
  line-height: 16px;
  padding: 0 8rpx;
  border-radius: 8rpx;
  color:#F58B85;
  margin-right: 10rpx;
  margin-top: 13px;
}

.c85bb58{
  color: #85bb58;
}
 
 

//获取应用实例
const app = getApp()

Page({
  data: {
    //顶部安全距离（状态栏高度）
    statusBarHeight: wx.getSystemInfoSync().statusBarHeight,
    list: [
      {id: 1,date:'2020-07-01',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'},
      {id: 2,date:'2020-07-02',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:8,statusName:'已完成'},
      {id: 3,date:'2020-07-03',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:3,statusName:'已完成'},
      {id: 4,date:'2020-07-04',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'},
      {id: 5,date:'2020-07-06',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:6,statusName:'已完成'},
      {id: 6,date:'2020-07-08',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'},{id: 7,date:'2020-07-09',timeStatr:'08:10',timeEnd:'10:10',countNum:15,num:2,statusName:'已完成'}
    ]
  },

})

<view style="margin-top:{{statusBarHeight}}px;padding-top:44px">
  <view class="top-bg"></view>
  <view class="box-list">
    <view class="box-title-row">
      <view class="box-column1">日期</view>
      <view class="box-column2">时段</view>
      <view class="box-column3">人数</view>
      <view class="box-column4">状态</view>
      <view class="box-column-end">操作</view>
    </view>
    <view wx:for="{{list}}" wx:key="id" class="box-data-row">
      <view class="box-column1">{{item.date}}</view>
      <view class="box-column2">{{item.timeStatr}}-{{item.timeEnd}}</view>
      <view class="box-column3">{{item.num}}/{{item.countNum}}</view>
      <view class="box-column4">
        <view class="statusF58B85">{{item.statusName}}</view>
      </view>
      <view class="box-column-end c85bb58">查看</view>
    </view>
  </view>
</view>