建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序 擴(kuò)展組件·row/col 組件
row/col 組件
按照柵格化布局思路，再加上響應(yīng)式布局的特性，提供了 row/col 兩個(gè)基礎(chǔ)布局組件，用來(lái)幫助開(kāi)發(fā)者快速適配多屏應(yīng)用。
我們擁有十余年網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。為企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信開(kāi)發(fā)、微信小程序定制開(kāi)發(fā)、成都手機(jī)網(wǎng)站制作、html5、等業(yè)務(wù)。無(wú)論您有什么樣的網(wǎng)站設(shè)計(jì)或者設(shè)計(jì)方案要求，我們都將富于創(chuàng)造性的提供專(zhuān)業(yè)設(shè)計(jì)服務(wù)并滿(mǎn)足您的需求。
核心概念是將整個(gè)屏幕寬度分為 24 單位，每個(gè)單位的大小，由當(dāng)前屏幕尺寸決定的。例如 375px 的屏幕寬度，那么 1 unit = 375/24 px.
使用方法
- npm 安裝
npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save
- 開(kāi)發(fā)者工具構(gòu)建 npm，勾選“使用 npm 模塊”，參考 npm 支持
- 頁(yè)面 json 文件中加入 usingComponents 字段
{
"usingComponents": {
"mp-col": "@miniprogram-component-plus/col",
"mp-row": "@miniprogram-component-plus/row"
}
}
- 在頁(yè)面中使用組件
三列均分布局
row 組件屬性
默認(rèn)無(wú)
col 組件屬性
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| span | number | 24 | 否 | 當(dāng)前 col 所占屏幕寬度的份數(shù) |
| offset | number | 0 | 否 | 距 row 左側(cè)偏移margin 距離 |
| push | number | 0 | 否 | 距左側(cè)偏移的單位距離 |
| pull | number | 0 | 否 | 距右側(cè)偏移的單位距離 |
| xs | number, Object | 否 | 當(dāng)屏幕 < 768px 時(shí)，對(duì)應(yīng)顯示的網(wǎng)格規(guī)則。例如 xs="2" 或 xs="{ "span": 24, "offset": 0 }" | |
| sm | number, Object | 否 | 當(dāng)屏幕 >= 768px, <992px，對(duì)應(yīng)顯示的網(wǎng)格規(guī)則。 | |
| md | number, Object | 否 | 當(dāng)屏幕 >= 992px, <1200px，對(duì)應(yīng)顯示的網(wǎng)格規(guī)則。 | |
| lg | number, Object | 否 | 當(dāng)屏幕 >= 1200px, <1920px 時(shí)，對(duì)應(yīng)顯示的網(wǎng)格規(guī)則。 | |
| xl | number, Object | 否 | 當(dāng)屏幕 >= 1920px 時(shí)，對(duì)應(yīng)顯示的網(wǎng)格規(guī)則。 |
提示：
- 同時(shí)設(shè)置 span 和 響應(yīng)式屬性時(shí)，當(dāng)屏幕超過(guò)響應(yīng)式屬性范圍時(shí)，會(huì)使用 span 屬性。
文章題目：創(chuàng)新互聯(lián)小程序教程：微信小程序 擴(kuò)展組件·row/col 組件
文章轉(zhuǎn)載：http://m.fisionsoft.com.cn/article/cohodoi.html
