建站
咨詢
售后
建站咨詢
新聞中心
- grid 宮格
- 屬性說明
- 示例
- 代碼示例
- 代碼示例
grid 宮格
解釋：宮格組件，包含上圖下文和左圖右文兩種樣式。可配置圖片、主標(biāo)題文案、副標(biāo)題文案。適用于信息展示，并可放置在頁面的任何位置。
創(chuàng)新互聯(lián)公司專業(yè)成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)，集網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文發(fā)稿等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計，讓網(wǎng)站在運行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。
屬性說明
| 屬性名 | 類型 | 必填 | 默認值 | 說明 |
|---|---|---|---|---|
|
list |
Array |
是 |
宮格數(shù)據(jù)，示例 |
|
|
type |
String |
否 |
vertical |
樣式類型 vertical 上圖下文、horizontal 左圖右文 |
|
columnNum |
Number |
否 |
2 |
宮格展示列數(shù)，最少支持兩列，上圖下文最多支持 4 列，左圖右文最多支持 3 列 |
|
imgBorderRadius |
Number |
否 |
3 |
圖片圓角（單位：rpx） |
|
hasBorder |
Boolean |
否 |
true |
行與行之間的下邊框 |
|
disable |
Boolean |
否 |
false |
是否有點擊態(tài) |
|
imageBorder |
Boolean |
否 |
false |
圖片是否有 1px 描邊 |
|
hasSeparateLine |
Boolean |
否 |
true |
宮格每一項之間的束分割線 |
|
smt-item-class |
String |
否 |
提供宮格擴展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變單個宮格外部樣式 |
|
|
smt-title-class |
String |
否 |
提供宮格擴展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變單個宮格主標(biāo)題樣式 |
|
|
smt-sub-title-class |
String |
否 |
提供宮格擴展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變單個宮格副標(biāo)題樣式 |
|
|
bind:clickhld |
EventHandle |
否 |
點擊事件，事件詳情為點擊項展示數(shù)據(jù) |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗
代碼示例
請使用百度APP掃碼
代碼示例
- SWAN
- JS
- CSS
- JSON
bind:clickhld="clickHld"list="{{list}}">bind:clickhld="clickHld"item-class="item"title-class="title"sub-title-class="sub-title"list="{{list}}"column-num="{{3}}">type="horizontal"bind:clickhld="clickHld"item-class="item"title-class="title"list="{{horizontalList}}"column-num="{{3}}">
本文標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：grid宮格
鏈接分享：http://m.5511xx.com/article/cdcocsj.html
