小程序宫格布局

妖狐艹你老母 2021-10-19 03:42 462阅读 0赞

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

**1.使用iview**

去[iview weapp github][]  
![在这里插入图片描述][2019081514535836.png]

引入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

index.wxss修改默认样式

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

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

效果图  
![在这里插入图片描述][20190815150059612.png]

**2.使用flex布局**

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

index.wxml

效果图以及wxss  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

**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;
    }

效果图如下：  
借鉴，有所改动[借鉴出自][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

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

[iview weapp github]: https://github.com/TalkingData/iview-weapp
[2019081514535836.png]: /images/20211018/0d93f07f1fee4a29bf1304df86dfb494.png
[20190815150059612.png]: /images/20211018/3fcdbc100b294e459fc9baccc09a6660.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20211018/0cdedc4c8fa2408a999bffc58ed9c2be.png
[Link 1]: https://blog.csdn.net/qq_35324453/article/details/82320956
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20211018/c729302976fc48dd80b869410ffa27d4.png