本文实例为大家分享了微信小程序实现简单表格的具体代码,供大家参考,具体内容如下
效果图:
页面结构
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') })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。