小程序宫格布局

article/2025/9/28 2:47:40

之前写小程序的时候用了iview的宫格，好像跳过了很多要自己写的坑，今天测试了下，总结一下方法。注意小程序中flex和grid的用法有很多不一眼！小心甄别！

1.使用iview

去iview weapp github
在这里插入图片描述

引入index.json

{"usingComponents": {"i-grid": "../../dist/iview/grid/index","i-grid-item": "../../dist/iview/grid-item/index","i-grid-icon": "../../dist/iview/grid-icon/index","i-grid-label": "../../dist/iview/grid-label/index"}
}

index.wxml

<view class="supermarket"><i-grid><i-grid-item wx:for="{{List}}" wx:key="item" bind:tap="goPageUrl" data-url="{{item.pageUrl}}"><i-grid-icon><image src="{{item.imgUrl}}" /></i-grid-icon><i-grid-label>{{item.name}}</i-grid-label></i-grid-item></i-grid></view>

index.wxss修改默认样式

.gridItem .gridIcon {width: 80rpx;height: 80rpx;
}.gridItem .gridInfo {font-size: 28rpx;/* overflow: auto; */
}

index.js文件中给list赋值即可

效果图
在这里插入图片描述

2.使用flex布局

flex布局和我们常用的并不一样

index.wxml

<view class="libin"><view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view></view>

效果图以及wxss
在这里插入图片描述

3.使用grid布局

wxml同上

index.wxss

.libin{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;
}.item{font-weight: bold;background-color: yellow;
}

效果图如下：
借鉴，有所改动借鉴出自
在这里插入图片描述