Layout 布局

使用指南

在 app.json 或 index.json 中引入组件

  1. "usingComponents": {
  2.   "van-row": "path/to/vant-weapp/dist/row/index",
  3.   "van-col": "path/to/vant-weapp/dist/col/index"
  4. }

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同

  1. <van-row>
  2.   <van-col span="8">span: 8</van-col>
  3.   <van-col span="8">span: 8</van-col>
  4.   <van-col span="8">span: 8</van-col>
  5. </van-row>
  7. <van-row>
  8.   <van-col span="4">span: 4</van-col>
  9.   <van-col span="10" offset="4">offset: 4, span: 10</van-col>
  10. </van-row>
  12. <van-row>
  13.   <van-col offset="12" span="12">offset: 12, span: 12</van-col>
  14. </van-row>

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0

  1. <van-row gutter="20">
  2.   <van-col span="8">span: 8</van-col>
  3.   <van-col span="8">span: 8</van-col>
  4.   <van-col span="8">span: 8</van-col>
  5. </van-row>

API

Row

参数说明类型默认值
gutter列元素之间的间距（单位为px）String | Number-

Col

参数说明类型默认值
span列元素宽度String | Number-
offset列元素偏移距离String | Number-

外部样式类

类名说明
custom-class根节点样式类

更新日志

版本类型内容
0.0.1feature新增组件
0.3.2bugfix修复动态渲染时 gutter 属性不生效的问题
0.3.3bugfix修复 offset 属性不生效的问题

原文: https://youzan.github.io/vant-weapp/#/col