返回介绍

开发指南

组件

JS

模板

Layout 布局

发布于 2021-04-03 05:35:24 字数 4861 浏览 1075 评论 0 收藏 0

Layout 布局 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

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

<template>
	<view class="wrap">
		<u-row gutter="16">
			<u-col span="3">
				<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="5">
				<view class="demo-layout bg-purple-dark"></view>
			</u-col>
		</u-row>
		<u-row gutter="16" justify="space-between">
			<u-col span="3">
				<view class="demo-layout bg-purple"></view>
			</u-col>
			<u-col span="9">
				<view class="demo-layout bg-purple-light"></view>
			</u-col>
		</u-row>
	</view>
</template>

<style scoped lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>

分栏间隔

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

<u-row gutter="16">
	<u-col span="3">
		<view class="demo-layout bg-purple">
		</view>
	</u-col>
	<u-col span="9">
		<view class="demo-layout bg-purple-light">
		</view>
	</u-col>
</u-row>

分栏偏移

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

<u-row gutter="16">
	<u-col span="3">
		<view class="demo-layout bg-purple"></view>
	</u-col>
	<u-col span="3" offset="6">
		<view class="demo-layout bg-purple-light"></view>
	</u-col>
</u-row>

对齐方式

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

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

<u-row gutter="16" justify="center">
	<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>

API

Row Props

参数说明类型默认值可选值
gutter栅格间隔,左右各为此值的一半,单位rpxString | Number0-
justify水平排列方式(微信小程序暂不支持)Stringstart(或flex-start)end(或flex-end) / center / around(或space-around) / between(或space-between)
align垂直排列方式Stringcentertop / bottom

Col Props

参数说明类型默认值可选值
span栅格占据的列数,总12等分String | Number01-12
offset分栏左边偏移,计算方式与span相同String | Number0-
text-align 1.5.5文字水平对齐方式Stringleftcenter / right

Row Events 1.4.3

事件名说明回调参数
clickrow被点击-

Col Events 1.4.3

事件名说明回调参数
clickcol被点击,会阻止事件冒泡到row-

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文