微信小程序 擴(kuò)展組件·row/col 組件

row/col 組件

按照柵格化布局思路，再加上響應(yīng)式布局的特性，提供了 row/col 兩個(gè)基礎(chǔ)布局組件，用來幫助開發(fā)者快速適配多屏應(yīng)用。

核心概念是將整個(gè)屏幕寬度分為 24 單位，每個(gè)單位的大小，由當(dāng)前屏幕尺寸決定的。例如 375px 的屏幕寬度，那么 1 unit = 375/24 px.

使用方法

1. npm 安裝

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

1. 開發(fā)者工具構(gòu)建 npm，勾選“使用 npm 模塊”，參考 npm 支持
2. 頁(yè)面 json 文件中加入 usingComponents 字段

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

1. 在頁(yè)面中使用組件

<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 組件屬性

默認(rèn)無

col 組件屬性

提示：

• 同時(shí)設(shè)置 span 和 響應(yīng)式屬性時(shí)，當(dāng)屏幕超過響應(yīng)式屬性范圍時(shí)，會(huì)使用 span 屬性。