Layout 布局

通过基础的 12 分栏，迅速简便地创建布局

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

基本使用

通过 col 组件的 span 设置需要分栏的比例

vue

<template>
    <view class="wu-page">
        <view class="wu-demo-block">
            <text class="wu-demo-block__title">基础使用</text>
            <view class="wu-demo-block__content">
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                </wu-row>
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </wu-col>
                </wu-row>
                <wu-row justify="space-between">
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                </wu-row>
            </view>
        </view>
    </view>
</template>

<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>

<template>
    <view class="wu-page">
        <view class="wu-demo-block">
            <text class="wu-demo-block__title">基础使用</text>
            <view class="wu-demo-block__content">
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                </wu-row>
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </wu-col>
                </wu-row>
                <wu-row justify="space-between">
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                </wu-row>
            </view>
        </view>
    </view>
</template>

<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>

分栏间隔

通过设置 row 组件的 gutter 参数，来指定每一栏之间的间隔(最终表现为左边内边距各为 gutter/2)，默认间隔为 0

vue

<template>
    <view class="wu-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
        </wu-row>
    </view>
</template>

<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>

<template>
    <view class="wu-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
        </wu-row>
    </view>
</template>

<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>

混合布局

通过指定 col 组件的 span 属性，指定不同的值，达到不同的比例

vue

<template>
    <view class="u-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="2">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="4">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="6">
                <view class="demo-layout bg-purple-dark"></view>
            </wu-col>
        </wu-row>
    </view>
</template>
<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>

<template>
    <view class="u-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="2">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="4">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="6">
                <view class="demo-layout bg-purple-dark"></view>
            </wu-col>
        </wu-row>
    </view>
</template>
<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>

分栏偏移

通过指定 col 组件的 offset 属性可以指定分栏偏移的栏数。

html

<view class="u-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

<view class="u-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

对齐方式

通过 row 组件的 justify 来对分栏进行灵活的对齐，可选值为 start (或 flex-start )、end (或 flex-end)、center、around (或 space-around )、between (或 space-between )，其最终的表现类似于 css 的 justify-content 属性。

注意：由于持微信小程序编译后的特殊结构，此方式不支持微信小程序。

html

<view class="wu-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

<view class="wu-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

API

Row Props

属性名	说明	类型	默认值	可选值
gutter	栅格间隔，左右各为此值的一半，单位任意	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	0-12
offset	分栏左边偏移，计算方式与span相同	String / Number	0	-
justify	水平排列方式(微信小程序暂不支持)	String	`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`	-

Layout 布局 ​

平台兼容性 ​

基本使用 ​

分栏间隔 ​

混合布局 ​

分栏偏移 ​

对齐方式 ​

API ​

Row Props ​

Col Props ​

Row Events ​

Col Events ​