更新记录

1.0.3（2023-06-12） 下载此版本

增加预览二维码

1.0.2（2023-04-14） 下载此版本

增加示例

1.0.1（2023-04-04） 下载此版本

优化动态数据源

平台兼容性

uni-app

liu-grid适用于uni-app项目的Grid宫格组件

本组件目前兼容微信小程序、H5

本组件是简单好用的Grid宫格组件，可自定义格子高度、每行显示的格子数量、行与列的间隙，源码超级简单易修改

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用方式

<view class="title">3列(默认)</view>
<liu-grid :dataList="dataList" @change="change"></liu-grid>
<view class="title">2列、自定义格子高度</view>
<liu-grid :dataList="dataList" :height="100" :columns="2" :gapNumber="20" @change="change"></liu-grid>
<view class="title">3列、自定义行与列的间隙</view>
<liu-grid :dataList="dataList" :height="100" :columns="3" :gapNumber="0" @change="change"></liu-grid>

export default {
    data() {
        return {
            dataList: [{
                id: 1,
                name: '第一个'
            }, {
                id: 2,
                name: '第二个'
            }, {
                id: 3,
                name: '第三个'
            }, {
                id: 4,
                name: '第四个'
            }, {
                id: 5,
                name: '第五个'
            }, {
                id: 6,
                name: '第六个'
            }]
        };
    },
    methods: {
        //点击宫格
        change(e) {
            console.log('当前点击的宫格：' + JSON.stringify(e))
        }
    }
}

属性说明