微信小程序 扩展组件·row/col 组件

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 和 响应式属性时，当屏幕超过响应式属性范围时，会使用 span 属性。