May 21, 2021 WeChat Mini Program Development Document
Following the gridded layout idea, coupled with the features of a responsive layout, provides row/col two basic layout components to help developers quickly adapt to multi-screen applications.
The core concept is to divide the entire screen width into 24 units, the size of each unit, determined by the current screen size. For example, with a screen width of 375px, then 1 unit is 375/24 px.
npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save
{
"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>
None of default
| Attributes | type | Defaults | Required | illustrate |
|---|---|---|---|---|
| span | number | 24 | no | The number of copies of the current COL |
| offset | number | 0 | no | Offset Margin from the left side of the ROW |
| push | number | 0 | no | Unit distance from the left side |
| pull | number | 0 | no | Units from the right side |
| Xs |
number, Object<span,offset, push, pull>
|
Whether |
When the
< 768px
the grid rules are displayed.
For
xs="2" 或 xs="{ "span": 24, "offset": 0 }"
|
|
| Sm |
number, Object<span,offset, push, pull>
|
Whether |
When the
>= 768px, <992px
the grid rules are displayed accordingly.
|
|
| Md |
number, Object<span,offset, push, pull>
|
Whether |
When the
>= 992px, <1200px
are displayed according to the screen.
|
|
| Lg |
number, Object<span,offset, push, pull>
|
Whether |
Grid rules are displayed when the screen is
>= 1200px, <1920px
|
|
| Xl |
number, Object<span,offset, push, pull>
|
Whether |
The grid rules that are displayed when the screen
>= 1920px
|
Tips: