マイクロ信ウィジェットは1つのテーブルtableを実現する
1993 ワード
1、wxml
2、wxss
3、js
{{item.str}}
{{item.text}}
{{item.name}}
{{item.str}}
{{item.text}}
{{item.name}}
{{item.str}}
2、wxss
.table {
border: 1px solid #ccc;
font-size: 28rpx;
background: #fff;
border-right: none;
}
.tr{
display: flex;
justify-content: space-between;
}
.td {
text-align: center;
border: 1px solid #ccc;
display: inline-block;
border-left: none;
border-bottom: none;
padding: 10rpx 1%;
width: 12%;
}
.thead .td{
border-top: none;
height: 140rpx;
line-height: 50rpx;
}
3、js
Page({
/**
*
*/
data: {
list: [
{ "str": "A", "text": "text1", "name": "name1" },
{ "str": "B", "text": "text2", "name": "name2" },
{ "str": "C", "text": "text3", "name": "name3" },
{ "str": "D", "text": "text4", "name": "name4" },
{ "str": "E", "text": "text5", "name": "name5" },
{ "str": "F", "text": "text6", "name": "name6" },
{ "str": "G", "text": "text7", "name": "name7" }
]
},
})