创新互联小程序教程：微信小程序 扩展组件·row/col 组件

row/col 组件

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

我们拥有十余年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供网站建设、网站设计、微信开发、微信小程序定制开发、成都手机网站制作、html5、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

核心概念是将整个屏幕宽度分为 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. 在页面中使用组件

三列均分布局
    
        
          
            
              
              
            
          
          
            
              
              
            
          
          
            
              
              
            
          
        

row 组件属性

默认无

col 组件属性

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

提示：

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

当前名称：创新互联小程序教程：微信小程序 扩展组件·row/col 组件
分享网址：http://www.zsjierui.cn/article/cohodoi.html