uniapp中 <uni-row> 和 <uni-col> 的用法
时间: 2023-12-24 15:01:58 浏览: 153
uniapp字体图标的使用
<-row> 和 <uni-col> 是 uni-app 中的组件,用于实现页面布局。其中,<uni-row> 用于创建一个行,而 <uni-col> 用于创建一个列。
<uni-row> 组件有以下属性:
- align:设置行内元素的对齐方式,可选值为 top、middle、bottom;
- justify:设置行内元素的水平对齐方式,可选值为 start、end、center、space-around、space-between、space-evenly。
<uni-col> 组件有以下属性:
- span:设置列的跨度,取值范围为1-24,默认值为1;
- offset:设置列的偏移量,取值范围为0-24,默认值为0;
- pull:设置列的向左偏移量,取值范围为0-24,默认值为0;
- push:设置列的向右偏移量,取值范围为0-24,默认值为0。
使用示例:
```
<uni-row align="middle" justify="center">
<uni-col span="8" offset="4">
<view class="box">1</view>
</uni-col>
<uni-col span="8">
<view class="box">2</view>
</uni-col>
</uni-row>
```
以上示例代码表示创建一行,其中包含两个列,第一个列跨度为8,偏移量为4,第二个列跨度为8,没有偏移量。两列元素的垂直对齐方式为居中,水平对齐方式为居中。每个列中都放置了一个 <view> 元素,用于展示内容。
阅读全文