微信小程序上实现 表格

微信小程序不支持 table 标签，在网上找到一个使用 flex 来实现表格的简明例子，记录一下。

table.wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th">head1view>
    <view class="th">head2view>
    <view class="th ">head3view>
  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://blog.csdn.net/MoDingXiao/article/details/54694730

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！