3.微信小程序中如何实现表格(flex布局)

最近研究微信小程序，但是weui中好像没有现成的表格组件。下面使用flex布局，实现表格。

1 、wxml 部分

<view class="table">
	<view class="tr bg-w">
    	<view class="th">head1</view>
        <view class="th">head2</view>
        <view class="th">head3</view>
        <view class="th">head4</view>
        <view class="th">head5</view>
    </view>
    <block wx:for="{{listData}}" wx:key="{{code}}">
		<view class="tr bg-g" wx:if="{{index % 2 == 0}}">
			 <view class="td">{{item.code}}</view>
		     <view class="td">{{item.text}}</view>
		     <view class="td">{{item.type}}</view>
		     <view class="td">{{item.number}}</view>
		     <view class="td border_right">{{item.day}}</view>
		</view>
        <view class="tr" wx:else>
        	<view class="td">{{item.code}}</view>
            <view class="td">{{item.text}}</view>
            <view class="td">{{item.type}}</view>
            <view class="td">{{item.number}}</view>
            <view class="td border_right">{{item.day}}</view>
        </view>
    </block>
</view>

2、wxss部分

.table {
  border: 0px solid darkgray;
  border-bottom:1px solid #000; 
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}
.border_right{
  border-right:1px solid #000; 
}

3、javascript部分

listData: [
      { "code": "01", "text": "text1", "type": "type1", "number": 22, "day": 5 },
      { "code": "02", "text": "text2", "type": "type2", "number": 22, "day": 5 },
      { "code": "03", "text": "text3", "type": "type3", "number": 22, "day": 5 },
      { "code": "04", "text": "text4", "type": "type4", "number": 22, "day": 5 },
      { "code": "05", "text": "text5", "type": "type5", "number": 22, "day": 5 },
      { "code": "06", "text": "text6", "type": "type6", "number": 22, "day": 5 },
      { "code": "07", "text": "text7", "type": "type7", "number": 22, "day": 5 }
    ],

4、效果图

注：转自 https://blog.csdn.net/MoDingXiao/article/details/54694730