# row/col 组件

按照栅格化布局思路,再加上响应式布局的特性,提供了 row/col 两个基础布局组件,用来帮助开发者快速适配多屏应用。

核心概念是将整个屏幕宽度分为 24 单位,每个单位的大小,由当前屏幕尺寸决定的。例如 375px 的屏幕宽度,那么 1 unit = 375/24 px.

# 使用方法

  1. npm 安装
npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save
  1. 开发者工具构建 npm,勾选“使用 npm 模块”,参考 npm 支持

  2. 页面 json 文件中加入 usingComponents 字段

{
  "usingComponents": {
    "mp-col": "@miniprogram-component-plus/col",
    "mp-row": "@miniprogram-component-plus/row"
  }
}
  1. 在页面中使用组件
<view class="page__desc">三列均分布局</view>
    <view>
        <mp-row>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
        </mp-row>
</view>

# row 组件属性

默认无

# col 组件属性

属性 类型 默认值 必填 说明
span number 24 当前 col 所占屏幕宽度的份数
offset number 0 距 row 左侧偏移margin 距离
push number 0 距左侧偏移的单位距离
pull number 0 距右侧偏移的单位距离
xs number, Object<span,offset, push, pull> 当屏幕 < 768px 时,对应显示的网格规则。例如 xs="2" 或 xs="{ "span": 24, "offset": 0 }"
sm number, Object<span,offset, push, pull> 当屏幕 >= 768px, <992px,对应显示的网格规则。
md number, Object<span,offset, push, pull> 当屏幕 >= 992px, <1200px,对应显示的网格规则。
lg number, Object<span,offset, push, pull> 当屏幕 >= 1200px, <1920px 时,对应显示的网格规则。
xl number, Object<span,offset, push, pull> 当屏幕 >= 1920px 时,对应显示的网格规则。

Tips:

  • 同时设置 span 和 响应式属性时,当屏幕超过响应式属性范围时,会使用 span 属性。