マイクロ信ウィジェットは1つのテーブルtableを実現する

1993 ワード

1、wxml

    
       
       
       
       
       
       
       
    
    
      
        {{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" }
    ]

  },

})