# Layout 布局 - 图1 Wuss-weapp

首页

组件库

快速上手

GitHub

首页

组件库

快速上手

GitHub

基础组件

导航

  • 操作反馈

  • 表单

  • 其他

# Layout 布局

# 使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-row": "wuss-weapp/w-row/index",
  3.   "w-col": "wuss-weapp/w-col/index",
  4. }

# 图片演示

# Layout 布局 - 图2

# 代码演示

  1. <w-pane title="Layout" desc="布局" />
  3. <w-pane desc="Default" />
  4. <view style="margin: 30px 0;">
  5.     <w-row>
  6.         <block wx:for="{{ 4 }}" wx:key="index">
  7.             <w-col span="6">
  8.                 <view style="padding: 10px 0;font-size:14px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  9.                     span[6]
  10.                 </view>
  11.             </w-col>
  12.         </block>
  13.     </w-row>
  14. </view>
  16. <view style="margin: 30px 0;">
  17.     <w-row>
  18.         <block wx:for="{{ 3 }}" wx:key="index">
  19.             <w-col span="8">
  20.                 <view style="padding: 10px 0;font-size:14px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  21.                     span[8]
  22.                 </view>
  23.             </w-col>
  24.         </block>
  25.     </w-row>
  26. </view>
  28. <view style="margin: 30px 0;">
  29.     <w-row>
  30.         <block wx:for="{{ 24 }}" wx:key="index">
  31.             <w-col span="1">
  32.                 <view class="w-layout-col" style="padding: 15px 0;font-size:14px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  33.           <view style="letter-spacing:0;font-size: 16rpx;">
  34.             {{ index+1 }}
  35.           </view>
  36.                 </view>
  37.             </w-col>
  38.         </block>
  39.     </w-row>
  40. </view>
  43. <w-pane desc="Gutter" />
  44. <view style="margin: 30px 0;">
  45.     <w-row gutter="10">
  46.         <block wx:for="{{ 4 }}" wx:key="index">
  47.             <w-col span="6">
  48.                 <view style="padding: 10px 0;font-size:14px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  49.                     gutter[10]
  50.                 </view>
  51.             </w-col>
  52.         </block>
  53.     </w-row>
  54. </view>
  57. <w-pane desc="Direction" />
  58. <view style="margin: 30px 0;">
  59.     <w-row direction="right">
  60.         <block wx:for="{{ 2 }}" wx:key="index">
  61.             <w-col span="6">
  62.                 <view style="padding: 10px 0;font-size:12px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  63.                     dirction[right]
  64.                 </view>
  65.             </w-col>
  66.         </block>
  67.     </w-row>
  68. </view>
  72. <w-pane desc="Offset" />
  73. <view style="margin: 30px 0;">
  74.     <w-row>
  75.         <block wx:for="{{ 2 }}" wx:key="index">
  76.             <w-col span="6" offset="2">
  77.                 <view style="padding: 10px 0;font-size:12px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  78.                     offset[2]
  79.                 </view>
  80.             </w-col>
  81.         </block>
  82.     </w-row>
  83. </view>
  86. <w-pane desc="Push" />
  87. <view style="margin: 30px 0;">
  88.     <w-row>
  89.         <block wx:for="{{ 2 }}" wx:key="index">
  90.             <w-col span="6" push="4">
  91.                 <view style="padding: 10px 0;font-size:12px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  92.                     push[4]
  93.                 </view>
  94.             </w-col>
  95.         </block>
  96.     </w-row>
  97. </view>
  100. <w-pane desc="Pull" />
  101. <view style="margin: 30px 0;">
  102.     <w-row direction="right">
  103.         <block wx:for="{{ 3 }}" wx:key="index">
  104.             <w-col span="6" pull="2">
  105.                 <view style="padding: 10px 0;font-size:12px;text-align:center;background: rgba(85,178,240,{{  index%2 == 0 ? .8 : .6 }});">
  106.                     pull[2]
  107.                 </view>
  108.             </w-col>
  109.         </block>
  110.     </w-row>
  111. </view>
.w-layout-col::before {
  content: '';
  display: table;
  clear: both;
  overflow: hidden;
}

# API

# Attribute 属性

# Col
属性 说明 类型 默认值
offset 栅格左侧的间隔格数，间隔内不可以有栅格 number 0
pull 栅格向左移动格数 number 0
push 栅格向右移动格数 number 0
span 栅格占位格数，为 0 时相当于 display: none number 0
# Row
属性 说明 类型 默认值
gutter 栅格间隔 number 0
direction 布局排列方式：[left/right] string left

# Event 事件

事件名 说明 参数

# Slot 插槽

名称 说明

# Class 自定义类名

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

Edit this page

← Accordion 手风琴 Card 卡片 →