uv-ui

# Layout 布局

✈

组件名：uv-row

点击下载&安装 (opens new window)

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

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √(仅支持微信小程序，原因 (opens new window)) √ √

注意

1、如需实现类似宫格的布局，请使用uv-ui的Grid宫格组件，可以设置角标，功能更完善和灵活。

2、百度小程序、抖音小程序等由于不支持将自定义节点设置成虚拟的，更加接近Vue组件的表现 (opens new window)，所以表现可能有异常，这点需要开发时注意。

# 基本使用

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

<template>
	<view>
		<uv-row customStyle="margin-bottom: 10px">
			<uv-col span="6">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="6">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-bottom: 10px">
			<uv-col span="4">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
			<uv-col span="4">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="4">
				<view class="demo-layout bg-purple-dark"></view>
			</uv-col>
		</uv-row>
		<uv-row justify="space-between">
			<uv-col span="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
		</uv-row>
	</view>
</template>
<style lang="scss">
	.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

<template>
	<view>
		<uv-row justify="space-between" gutter="10">
			<uv-col span="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
		</uv-row>
	</view>
</template>
<style lang="scss">
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}
	.bg-purple {
		background: #CED7E1;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

# 混合布局

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

<template>
	<view>
		<uv-row justify="space-between" gutter="10">
			<uv-col span="2">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="4">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
			<uv-col span="6">
				<view class="demo-layout bg-purple-dark"></view>
			</uv-col>
		</uv-row>
	</view>
</template>
<style lang="scss">
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}
	.bg-purple {
		background: #CED7E1;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

# 分栏偏移

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

<template>
	<view>
		<uv-row justify="space-between" customStyle="margin-bottom: 10px">
			<uv-col span="3" offset="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="3" offset="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
		</uv-row>
		<uv-row>
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="3" offset="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
		</uv-row>
	</view>
</template>
<style lang="scss">
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}
	.bg-purple {
		background: #CED7E1;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

# 对齐方式

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

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

<template>
	<view>
		<uv-row justify="space-between" customStyle="margin-bottom: 10px">
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
		</uv-row>
		<uv-row>
			<uv-col span="3">
				<view class="demo-layout bg-purple-light"></view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple"></view>
			</uv-col>
		</uv-row>
	</view>
</template>
<style lang="scss">
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}
	.bg-purple {
		background: #CED7E1;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Row Props

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

# Col Props

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

# Justify Options

属性值 说明
start (或flex-start) 左对齐
end (或flex-end) 右对齐
center 居中对齐
around (或space-around) 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍
between (或space-between) 两端对齐主轴的起点与终点，项目之间的间隔都相等

# Row Events

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

# Col Events

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

← Icon 图标 →