欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现简易table表格

程序员文章站 2023-11-16 19:05:52
本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下 由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使...

本文实例为大家分享了微信小程序实现简易表格的具体代码,供大家参考,具体内容如下

由于需要开发小程序,前端又是自己弄,类似table的标签也没有,后来看到小程序文档中推荐使用flex布局,就把css中的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') 
 }

})

效果图如下

微信小程序实现简易table表格

其实这也是很简单flex布局,更复杂的布局就交给大家了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。