如何在小程序中插入表格

我们可以在微信小程序视图容器view中通过flex布局实现表格样式。

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

table.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>
  <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>
    <view class=tr wx:else>
      <view class=td>{{item.code}}</view>
      <view class=td>{{item.text}}</view>
      <view class=td>{{item.type}}</view>
    </view>
  </block>
</view>

table.wxss

.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.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;
}

table.js

Page({
  data: {
    listData:[
      {code:01,text:text1,type:type1},
      {code:02,text:text2,type:type2},
      {code:03,text:text3,type:type3},
      {code:04,text:text4,type:type4},
      {code:05,text:text5,type:type5},
      {code:06,text:text6,type:type6},
      {code:07,text:text7,type:type7}
    ]
  },
  onLoad: function () {
    console.log('onLoad') 
  }

})

效果图如下

推荐：《小程序开发教程》

原文地址：https://www.jb51.cc/weapp/1201648.html