微信小程序之获取后台动态数据Gird表格布局display:grid

在工作中常用的就是flex布局和grid布局了,因为本人对grid布局不是很熟练,这次主要是想模拟获取后台的动态数据来动态的设置表格布局,算是一个简单的尝试,毕竟之前没有用过。分享一下。

如果对css grid布局不熟的建议看着篇文章,介绍的很详细:CSS Grid 布局完全指南(图解 Grid 详细教程)

(一)实现效果

跟我上一篇文章微信小程序之获取后台动态数据表格布局display:table实现的效果很像,但是我是要写这篇文章,因为这个方法优化了很多代码,值得参考学习。
微信小程序之获取后台动态数据Gird表格布局display:grid_第1张图片

(二)实现过程

1、js 设置很简单,通过数组对象格式来模拟获取到的后台数据格式:

Page({
  data: {
    tableData: [{ //模拟动态获取到的后台数据:数组对象格式
      id: 0,
      name: 'table-th-cell'
    },
    {
      id: 1,
      name: 'table-th-cell'
    },
    {
      id: 2,
      name: 'table-th-cell'
    },
    {
      id: 3,
      name: 'table-tr-cell'
    },
    {
      id: 4,
      name: 'table-tr-cell'
    },
    {
      id: 5,
      name: 'table-tr-cell'
    },
    {
      id: 6,
      name: 'table-tr-cell'
    },
    {
      id: 7,
      name: 'table-tr-cell'
    },
    {
      id: 8,
      name: 'table-tr-cell'
    },

    ],
  },
  onLoad: function () {
  },
})

2、设置wxml也是一些常用的布局格式:

<view class="table">

  <block wx:for='{{tableData}}' wx:key='*this'>
    <view class='table-th' wx:if='{{index<3}}'>{{item.name}}view>
    <view class='table-td' wx:else>{{item.name}}view>
  block>
view>

3、wxss设置,主要通过父容器设置为块级网格,然后设置 父容器的列、行大小 ,fr单位是等分分配列空间; 设置有多余数据时,自动添加新行时默认行高为:200rpx ;设置网格线大小 ;子元素的话可以根据自己自定义样式内容:

.table {
  display: grid;
  width: 100%;
  overflow-x: hidden;
  /* 设置列、行大小 fr单位是等分分配列空间*/
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200rpx 200rpx;
  /* 有多余数据时,自动添加新行时默认行高为:200rpx */
  grid-auto-rows: 200rpx;
  /* 设置网格线大小 */
  grid-gap: 10rpx;
}

.table-th {
  font-weight: bold;
  background-color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-td {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

总的来说,相对于display:table 来布局网格简化了很多代码,更轻松了一点。
注意: 微信小程序很多安卓手机不兼容这个布局,亲测扎心了。

你可能感兴趣的:(微信小程序)