Layout栅格布局

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-layout-row": "/miniprogram_npm/vtuweapp/layout/row/vtu-layout-row",
    3.     "vtu-layout-col": "/miniprogram_npm/vtuweapp/layout/col/vtu-layout-col"
    4. }
    5.

    代码演示

    基础布局

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

    1. <vtu-layout-row>
    2.   <vtu-layout-col span="12"><view class="layoutSpan"></view></vtu-layout-col>
    3. </vtu-layout-row>
    4. <vtu-layout-row>
    5.   <vtu-layout-col span="6"><view class="layoutSpan"></view></vtu-layout-col>
    6.   <vtu-layout-col span="6"><view class="layoutSpan light"></view></vtu-layout-col>
    7. </vtu-layout-row>
    8. <vtu-layout-row>
    9.   <vtu-layout-col span="4"><view class="layoutSpan"></view></vtu-layout-col>
    10.   <vtu-layout-col span="4"><view class="layoutSpan light"></view></vtu-layout-col>
    11.   <vtu-layout-col span="4"><view class="layoutSpan"></view></vtu-layout-col>
    12. </vtu-layout-row>
    13. <vtu-layout-row>
    14.   <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
    15.   <vtu-layout-col span="3"><view class="layoutSpan light"></view></vtu-layout-col>
    16.   <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
    17.   <vtu-layout-col span="3"><view class="layoutSpan light"></view></vtu-layout-col>
    18. </vtu-layout-row>
    19. <vtu-layout-row>
    20.   <vtu-layout-col span="2"><view class="layoutSpan"></view></vtu-layout-col>
    21.   <vtu-layout-col span="2"><view class="layoutSpan light"></view></vtu-layout-col>
    22.   <vtu-layout-col span="2"><view class="layoutSpan"></view></vtu-layout-col>
    23.   <vtu-layout-col span="2"><view class="layoutSpan light"></view></vtu-layout-col>
    24.   <vtu-layout-col span="2"><view class="layoutSpan"></view></vtu-layout-col>
    25.   <vtu-layout-col span="2"><view class="layoutSpan light"></view></vtu-layout-col>
    26. </vtu-layout-row>
    27.

    分栏间隔

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

    <vtu-layout-row gutter="20">
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan light"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan light"></view></vtu-layout-col>
</vtu-layout-row>

    混合布局

    <vtu-layout-row gutter="10">
  <vtu-layout-col span="8"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="4"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>
<vtu-layout-row gutter="10">
  <vtu-layout-col span="4"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="2"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>
<vtu-layout-row gutter="10">
  <vtu-layout-col span="2"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="5"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="5"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>

    对齐方式

    通过align属性，可将分栏进行灵活的对齐，对齐方式有三种：leftcenterright

    <vtu-layout-row align="right">
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>
<vtu-layout-row align="center">
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>
<vtu-layout-row align="left">
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="3"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>

    分栏偏移

    支持偏移指定的栏数。

    <vtu-layout-row gutter="20">
  <vtu-layout-col span="4"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="4" offset="4"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>
<vtu-layout-row gutter="20">
  <vtu-layout-col span="2"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="4" offset="2"><view class="layoutSpan"></view></vtu-layout-col>
  <vtu-layout-col span="2" offset="2"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>
<vtu-layout-row gutter="20">
  <vtu-layout-col span="6" offset="2"><view class="layoutSpan"></view></vtu-layout-col>
</vtu-layout-row>

    组件参数

    Row Props

    参数说明类型默认值必填
    gutter列元素之间的间距（单位为px）Number0否
    align水平排列方式Stringleft否

    Col Props

    参数说明类型默认值必填
    span栅格占据的列数Number12否
    offset栅格左侧的间隔格数Number0否

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Layout 栅格布局 - 图1