更新记录

0.0.2（2025-01-08） 下载此版本

插件说明

0.0.1（2025-01-07） 下载此版本

初始化

平台兼容性

clopla-grid 【宫格】

高度自适应

组件参数

• rows 数据列表
• column 每列显示个数，默认5
• margin 外边距，左右两侧边距，默认0
• padding 每列间隔，默认5

暴露参数

• row 列数据，返回原始数据
• size 列大小 每列宽度

用法

<clopla-grid :column="3" :margin="20" :padding="10" :rows="shops" v-slot="{row,size}">
    <view class="uni-border uni-radius-lg flex flex-column uni-py-5"
        :style="{width: size + 'px',borderColor: theme.borderColor,overflow:'hidden',boxSizing: 'border-box'}">
        <view class="flex uni-radius-circle"
            :style="{width: (size - 20) + 'px',height: (size - 20) + 'px',backgroundColor: theme.secondBgColor, color: theme.secondTextColor}">
            <image v-if="row.icon" :src="row.icon" mode="aspectFill" class="img"></image>
            <view v-else class="uni-caption uni-ma-5 ellipsis">
                <text>{{row.name}}</text>
            </view>
        </view>
        <view class="flex flex-column uni-mt-2" :style="{width: size + 'px'}">
            <view class="uni-caption lighter ellipsis"
                :style="{width: (size - 20) + 'px', color: theme.secondTextColor}">
                <text>{{row.name}}</text>
            </view>
        </view>
    </view>
</clopla-grid>