Grid 宫格

在水平和垂直方向，将布局切分成若干等大的区块。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Grid",
  3.     "usingComponents": {
  4.         "wux-icon": "../../dist/icon/index",
  5.         "wux-grids": "../../dist/grids/index",
  6.         "wux-grid": "../../dist/grid/index"
  7.     }
  8. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Grid</view>
  4.         <view class="page__desc">宫格</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Default</view>
  8.         <wux-grids>
  9.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  10.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  11.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  12.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  13.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  14.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  15.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  16.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  17.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  18.         </wux-grids>
  19.         <view class="sub-title">Square = true</view>
  20.         <wux-grids square>
  21.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  22.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  23.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  24.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  25.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  26.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  27.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  28.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  29.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  30.         </wux-grids>
  31.         <view class="sub-title">Bordered = false</view>
  32.         <wux-grids bordered="{{ false }}">
  33.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  34.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  35.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  36.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  37.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  38.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  39.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  40.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  41.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  42.         </wux-grids>
  43.         <view class="sub-title">Col = 4</view>
  44.         <wux-grids col="4">
  45.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  46.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  47.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  48.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  49.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  50.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  51.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  52.             <wux-grid thumb="https://wux.cdn.cloverstd.com/logo.png" label="Wux Weapp" />
  53.         </wux-grids>
  54.         <view class="sub-title">Custom content</view>
  55.         <wux-grids>
  56.             <wux-grid>
  57.                 <wux-icon type="logo-github" />
  58.                 <view>Wux Weapp</view>
  59.             </wux-grid>
  60.             <wux-grid>
  61.                 <wux-icon type="logo-github" />
  62.                 <view>Wux Weapp</view>
  63.             </wux-grid>
  64.             <wux-grid>
  65.                 <wux-icon type="logo-github" />
  66.                 <view>Wux Weapp</view>
  67.             </wux-grid>
  68.             <wux-grid>
  69.                 <wux-icon type="logo-github" />
  70.                 <view>Wux Weapp</view>
  71.             </wux-grid>
  72.             <wux-grid>
  73.                 <wux-icon type="logo-github" />
  74.                 <view>Wux Weapp</view>
  75.             </wux-grid>
  76.             <wux-grid>
  77.                 <wux-icon type="logo-github" />
  78.                 <view>Wux Weapp</view>
  79.             </wux-grid>
  80.             <wux-grid>
  81.                 <wux-icon type="logo-github" />
  82.                 <view>Wux Weapp</view>
  83.             </wux-grid>
  84.             <wux-grid>
  85.                 <wux-icon type="logo-github" />
  86.                 <view>Wux Weapp</view>
  87.             </wux-grid>
  88.             <wux-grid>
  89.                 <wux-icon type="logo-github" />
  90.                 <view>Wux Weapp</view>
  91.             </wux-grid>
  92.         </wux-grids>
  93.     </view>
  94. </view>

视频演示

Grid

API

Grids props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-grids
col string 列数 3
bordered boolean 是否有边框 true
square boolean 每个格子是否固定为正方形 false

Grids externalClasses

名称 描述
wux-class 根节点样式类

Grid props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-grid
hoverClass string 指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果 default
thumb string 缩略图 -
label string 描述信息 -
bind:click function 点击事件 -

Grid slot

名称 描述
- 自定义内容
header 自定义缩略图

Grid externalClasses

名称 描述
wux-class 根节点样式类