row/col 组件

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

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

使用方法

  1. npm 安装
  1. npm i @miniprogram-component-plus/col --save
  2. npm i @miniprogram-component-plus/row --save

  1. 开发者工具构建 npm，勾选“使用 npm 模块”，参考 npm 支持

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

  1. {
  2.   "usingComponents": {
  3.     "mp-col": "@miniprogram-component-plus/col",
  4.     "mp-row": "@miniprogram-component-plus/row"
  5.   }
  6. }
  1. 在页面中使用组件
  1. <view class="page__desc">三列均分布局</view>
  2.     <view>
  3.         <mp-row>
  4.           <mp-col span="{{8}}">
  5.             <view>
  6.               <view class="col">
  7.               </view>
  8.             </view>
  9.           </mp-col>
  10.           <mp-col span="{{8}}">
  11.             <view>
  12.               <view class="col">
  13.               </view>
  14.             </view>
  15.           </mp-col>
  16.           <mp-col span="{{8}}">
  17.             <view>
  18.               <view class="col">
  19.               </view>
  20.             </view>
  21.           </mp-col>
  22.         </mp-row>
  23. </view>

row 组件属性

默认无

col 组件属性

属性类型默认值必填说明
spannumber24否当前 col 所占屏幕宽度的份数
offsetnumber0否距 row 左侧偏移margin 距离
pushnumber0否距左侧偏移的单位距离
pullnumber0否距右侧偏移的单位距离
xsnumber, Object<span,offset, push, pull>否当屏幕 < 768px 时，对应显示的网格规则。例如 xs=”2” 或 xs=”{ “span”: 24, “offset”: 0 }”
smnumber, Object<span,offset, push, pull>否当屏幕 >= 768px, <992px，对应显示的网格规则。
mdnumber, Object<span,offset, push, pull>否当屏幕 >= 992px, <1200px，对应显示的网格规则。
lgnumber, Object<span,offset, push, pull>否当屏幕 >= 1200px, <1920px 时，对应显示的网格规则。
xlnumber, Object<span,offset, push, pull>否当屏幕 >= 1920px 时，对应显示的网格规则。

Tips:

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