微信小程序开发实现宫格布局

微信小程序开发实现宫格布局

问题背景

客户端和小程序等日常开发和学习过程中，宫格布局是一种很场景的场景，可以清晰的展现分类等效果。本文将介绍微信小程序开发中如何实现宫格布局效果。

问题分析

先上效果图，如下所示：

问题解决

话不多说，直接上代码。
（1）index.js文件，代码如下：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    grid_list: ['房屋信息', '房屋信息1', '房屋信息2', '房屋信息3', '房屋信息4', '房屋信息5', '房屋信息6', '房屋信息7'],
    open: false
  },
  /**
* 生命周期函数--监听页面显示
*/
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1,
      });
    }
  }
})

（2）index.wxml文件，代码如下：

<view id="container">
  <view class="item" wx:for="{{grid_list}}">
    <image class="grid-img" src="../../static/img/icon-admin.png"></image>
  {{item}}
  </view>
</view>

（3）index.wxss文件，代码如下：

#container{
  display: grid;
  margin-top: 10rpx;
  grid-template-columns:repeat(auto-fill,70px);/** 平铺宽度为100px的单元格 */
  grid-template-rows: 100px;/** 设置高度为100px */
  grid-auto-rows: 100px;/** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */
  justify-content: center;/** 水平居中  */
  grid-gap: 10rpx;/** 水平和垂直间距为10rpx*/
  padding: 10rpx;
}

.item {
  margin: 10rpx;
  font-size: 7pt;
  border: 1px solid #e5e4e9;  /*设置边框 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.grid-img{
  width: 100rpx;
  height: 100rpx;
  margin: 15rpx;
}

问题总结

本文主要介绍了微信小程序开发中如何实现宫格布局效果，有兴趣的同学可以进一步深入研究。