微信小程序开发文档微信小程序扩展组件·row/col 组件

2024-02-25 开发教程微信小程序开发文档匿名 3℃

row/col 组件

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

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

使用方法

npm 安装

npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save

开发者工具构建 npm，勾选“使用 npm 模块”，参考 npm 支持
页面 json 文件中加入 usingComponents 字段

{
  "usingComponents": {
    "mp-col": "@miniprogram-component-plus/col",
    "mp-row": "@miniprogram-component-plus/row"
  }
}

在页面中使用组件

<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`时，对应显示的网格规则。

提示：

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

上一节：微信小程序扩展组件·选项卡组件

下一节：微信小程序扩展组件·纵向选项卡组件

"微信小程序开发文档"的目录

微信小程序开发文档 微信小程序 扩展组件·row/col 组件

row/col 组件

使用方法

row 组件属性

col 组件属性

微信小程序开发文档微信小程序扩展组件·row/col 组件