更新记录

1.0.0(2021-12-30)

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


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问