更新记录

1.0.0（2021-12-30） 下载此版本

根据需要做出页面编码较大调整，更新页面。 重新审视，进一步美化和细微修改排版布局，完成作品。

平台兼容性

lxm-layout-grids是一个前端页面模板，一般用来做个人中心页面或其他页面。

前端页面模板：layout布局+宫格布局+图片图标+横滚列表+单元格布局+间隔槽+页脚

使用的工具和技术：使用uView2的UI工具和技术，支持nvue页面。

layout组件参数说明

API

Row Props

参数 说明 类型 默认值 可选值 gutter 栅格间隔，左右各为此值的一半，单位rpx String | Number 0 - justify 水平排列方式(微信小程序暂不支持) String start(或flex-start) end(或flex-end) / center / around(或space-around) / between(或space-between) align 垂直排列方式 String center top / bottom

Col Props

参数 说明 类型 默认值 可选值 span 栅格占据的列数，总12等分 String | Number 0 1-12 offset 分栏左边偏移，计算方式与span相同 String | Number 0 - justify 水平排列方式 String start start(或flex-start)、end(或flex-end)、center、around(或space-around)、between(或space-between) align 垂直对齐方式 String stretch top、center、bottom、stretch textAlign 文字水平对齐方式 String left center / right

Row Events

事件名 说明 回调参数 click row被点击 -

Col Events

事件名 说明 回调参数 click col被点击，会阻止事件冒泡到row -

<template>
    <view class="u-page">
        <view class="u-demo-block">
            <text class="u-demo-block__title">基础使用</text>
            <view class="u-demo-block__content">
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </u-col>
                </u-row>
                <u-row justify="space-between">
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                </u-row>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">分栏间隔</text>
            <view class="u-demo-block__content">
                <u-row justify="space-between" gutter="10">
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                </u-row>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">混合布局</text>
            <view class="u-demo-block__content">
                <u-row justify="space-between" gutter="10">
                    <u-col span="2">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple-dark"></view>
                    </u-col>
                </u-row>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">分栏偏移</text>
            <view class="u-demo-block__content">
                <u-row justify="space-between" customStyle="margin-bottom: 10px">
                    <u-col span="3" offset="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3" offset="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </u-row>
                <u-row>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3" offset="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </u-row>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">对齐方式</text>
            <view class="u-demo-block__content">
                <u-row justify="space-between" customStyle="margin-bottom: 10px">
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </u-row>
                <u-row>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </u-row>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>

传奇开心果模板lxm-layout-gridsV1.0.0传奇开心果出品2021.12.30