微信小程序实现简单表格

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

效果图：

页面结构

view class=' table ' view class=' tr BG-w ' view class=' th ' SPB/view view view class=' th ' dpb/view view view class=' th '日期/view/view block wx : for=' { { listData } } ' wx : key=' {[code]} ' view class=' tr ' wx : if=' { { index % 2==0 } } ' view class=' TD ' { item。code } }/view view class=' TD ' { item。text } }/view view view class=' TD ' { item。date } }/view/view class=' tr ' wx : else view class=' TD ' { text }。表格{ border: 0px实心深灰色；font-size : 12px}.tr { display: flex宽度： 100%;正义-内容：中心；高度： 2毫米项目：居中；}.TD {宽度：40%；正义-内容：中心；文本对齐：中心；}.bg-w{背景：雪；} .th { width : 40%；正义-内容：中心；背景# 3366 ffcolor : # fffdisplay : flexheight : 2 remalign-items :居中；}js

page({ data : { list data : [{ ' code ' : ' 120 '，' text': '70 '，' date': '2018年四月19日},{ '代码' : '125 ','文本' : '74 ','日期' : '2018年四月17日},{ '代码' : '119 ','文本' : '76 ','日期' : '2018年四月16日},{ '代码' : '117 ','文本' : '78 ','日期' : '2018年四月15日} ] }，onLoad:函数(){ console.log('onLoad') })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。