uniapp组件-uni-row/col 布局

目录

一、基础布局

二、混合布局

三、分栏偏移（offset、pull、push）

四、响应式布局

---

 流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局

gutter属性表示间隔

一、基础布局

使用单一分栏创建基础的栅格布局

<template>
	<view>
		<uni-row style="margin-bottom: 10px;">
			<uni-col><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>

		<uni-row style="margin-bottom: 10px;" :gutter="20">
			<uni-col :span="12"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="12"><view class="demo-uni-col light"></view></uni-col>
		</uni-row>

		<uni-row style="margin-bottom: 10px;">
			<uni-col :span="8"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="8"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="8"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>

		<uni-row style="margin-bottom: 10px;">
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col light"></view></uni-col>
		</uni-row>

		<uni-row style="margin-bottom: 10px;" :gutter="20">
			<uni-col :span="4"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col light"></view></uni-col>
		</uni-row>
	</view>
</template>
<style>
.demo-uni-col {
	height: 36px;
	border-radius: 3px;
}
.dark {
	background-color: #d3dce6;
}

.light {
	background-color: #e5e9f2;
}
</style>

二、混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局

<template>
	<view>
		<uni-row :gutter="20">
			<uni-col :span="8"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="8"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col light"></view></uni-col>
		</uni-row>
		<uni-row style="margin-top: 10px;" :gutter="10">
			<uni-col :span="4"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="16"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="4"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
	</view>
</template>
<style>
.demo-uni-col {
	height: 36px;
	border-radius: 3px;
}
.dark {
	background-color: #d3dce6;
}

.light {
	background-color: #e5e9f2;
}
</style>

三、分栏偏移（offset、pull、push）

1、offset

支持偏移指定的栏数

<template>
	<view>
		<uni-row>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="6" :offset="2"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="6" :offset="2"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
	</view>
</template>
<style>
.demo-uni-col {
	height: 36px;
	border-radius: 10px;
}
.dark {
	background-color: #d3dce6;
}

.light {
	background-color: #e5e9f2;
}
</style>

2、pull和push

这两个都是只针对当前的板块，它不会影响其他任何一个板块。相当于position中的relative

pull是自身向左偏移；push是自身向右偏移

<template>
	<view>
		<uni-row>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="6" :push="2"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
		<uni-row>
			<uni-col :span="6" :pull="2"><view class="demo-uni-col light"></view></uni-col>
			<uni-col :span="6"><view class="demo-uni-col dark"></view></uni-col>
		</uni-row>
	</view>
</template>
<style>
.demo-uni-col {
	height: 36px;
	border-radius: 10px;
}
.dark {
	background-color: #d3dce6;
}

.light {
	background-color: #e5e9f2;
}
</style>

四、响应式布局

共五个响应尺寸：xs、sm、md、lg 和 xl

<template>
	<view >
		<uni-row class="demo-uni-row" :gutter="20">
			<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
				<view class="demo-uni-col dark"></view>
			</uni-col>
			<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
				<view class="demo-uni-col light"></view>
			</uni-col>
			<uni-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
				<view class="demo-uni-col dark"></view>
			</uni-col>
			<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
				<view class="demo-uni-col light"></view>
			</uni-col>
		</uni-row>
	</view>
</template>
<style>
	.demo-uni-row {
		margin-bottom: 10px;
	}
	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}
	.dark {
		background-color: #d3dce6;
	}
	.light {
		background-color: #e5e9f2;
	}
</style>