uni-app布局组件(栅格)

有问题欢迎留言,觉得有帮助给个好评~

特点

  • 简单易用
  • 支持嵌套
  • 可配置化

参数

u-row组件(行)属性:

  • gutter: 此行中的列之间的间隔,单位: upx
  • align: 对齐方式, 为'left','right','center'之一

u-col组件(列)属性:

  • span: 此列所占格数, 一行为24格
  • offset: 偏移格数

使用步骤

  • 导入本组件, 一般目录在./components/dl-grid
  • 在main.js全局注册组件, 方便随时调用, 如:
import Vue from 'vue'
// 注意引入本组件的路径
import Row from './components/dl-grid/row.vue'
import Col from './components/dl-grid/col.vue'

Vue.component('u-row', Row); //<row>和<col>为H5原生标签, 不能直接用, 可起名<u-row>或者其他的
Vue.component('u-col', Col);
  • 在template中开始布局, 示例:
<template>
    <view class="content">
        <u-row class="demoRow" align="left" gutter="20">
            <u-col span="12"><view class="demoCol"> 12 </view></u-col>
            <u-col span="12">
                <u-row class="insRow" gutter="20">
                    <u-col span="12"><view class="demoCol"> 嵌套12 </view></u-col>
                    <u-col span="12"><view class="demoCol"> 嵌套12 </view></u-col>
                </u-row>
            </u-col>
        </u-row>
        <u-row class="demoRow" align="right" gutter="20">
            <u-col span="8"><view class="demoCol"> 8 </view></u-col>
            <u-col span="8"><view class="demoCol"> 8 </view></u-col>
        </u-row>

        <u-row class="demoRow" align="center" gutter="20">
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4" offset="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
        </u-row>
        <u-row class="demoRow" gutter="20">
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
            <u-col span="4"><view class="demoCol"> 4 </view></u-col>
        </u-row>
    </view>
</template>


    export default {
        data() {
            return {
                title: 'Hello u-grid'
            }
        }
    }


<style>
    .content {
        text-align: center;
    }

    .demoRow{
        padding: 20upx;
        background: #fff;
    }

    .demoCol{
        background: #2B9939; border-radius: 15upx; text-align: center; height: 70upx; color: #FFFFFF; font-size: 20upx; line-height: 70upx;
    }
</style>

特别说明

修改自网友分享的vue布局组件, 本插件作者作了对uni-app应用的兼容.

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

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

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

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