微信小程序（六）表格布局

偏执的太偏执、 2023-02-25 12:22 103阅读 0赞

小程序中表格布局和android开发中的gridview控件布局不一样，小程序中不是定义一个表格控件，而是通过flex布局自动换行的方式来达到目的。  
首先在wxml布局文件中：

这里block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。  
其中在js文件中定义的数据：

Page({
      /**
       * 页面的初始数据
       */
      data: {
        grids: [0, 1, 2, 3, 4, 5, 6, 7, 8,9,10,11,12,13,14,15,16, 17, 18,19]
      }
    })

在wxss中定义样式：

.shop-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      flex-grow: 1;
    }
    .shop-item {
      display: flex;
      flex-direction: column;
      width: 25%;
      height: 120px;
      align-items: center;
      margin-bottom: 15px;
    }
    .shop-img {
      width: 100%;
    }
    .shop-des {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 1px;
    }
    .shop-add{
      width: 16px;
      height: 16px;
    }
    .shop-text {
      margin-top: 5px;
    }
    .shop-num {
      margin-left: 5px;
      margin-right: 5px;
    }