小程序宫格布局

之前写小程序的时候用了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;
}

效果图如下：
借鉴，有所改动借鉴出自

注：小程序好像对grid 的兼容不是特别好，建议还是使用iview封装好的组件会比较方便