百度智能小程序 列表

2020-09-03 16:17 更新

list 列表

解釋:列表組件,支持配置主標(biāo)題文案、副標(biāo)題文案、輔助信息、圖標(biāo)等。適用于信息展示,并可放置在頁(yè)面的任何位置。

屬性說(shuō)明

屬性名 類型 必填 默認(rèn)值 說(shuō)明

title

String

''

主標(biāo)題文案

subTitle

String

''

副標(biāo)題文案

desc

String

''

右側(cè)輔助文案

imgSrc

String

''

圖片鏈接

disable

Boolean

true

是否有點(diǎn)擊態(tài)

smt-list-container

String

提供擴(kuò)展樣式類,供開(kāi)發(fā)者自定義組件樣式??赏ㄟ^(guò)此 class 修改 list 外層樣式

smt-title

String

提供擴(kuò)展樣式類,供開(kāi)發(fā)者自定義組件樣式。可通過(guò)此 class 修改主標(biāo)題樣式

smt-sub-title

String

提供擴(kuò)展樣式類,供開(kāi)發(fā)者自定義組件樣式??赏ㄟ^(guò)此 class 修改副標(biāo)題樣式

smt-desc

String

提供擴(kuò)展樣式類,供開(kāi)發(fā)者自定義組件樣式??赏ㄟ^(guò)此 class 修改右側(cè)輔助文案樣式

示例 

在開(kāi)發(fā)者工具中打開(kāi)


代碼示例

<smt-list
    title="{{item.title}}"
    sub-title="{{item.subTitle}}"
    desc="{{item.desc}}"
    img-src="{{item.imgSrc}}"
    disable="{{item.disable}}"
></smt-list>
Page({
    data: {
        item: {
            title: '列表信息超長(zhǎng)文本',
            subTitle: '副標(biāo)題',
            desc: '輔助信息',
            imgSrc: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/swan-demo-smt-grid.png',
            disable: true
        }
    }
});
.smt-list-container {
    <!-- 可通過(guò)此 class 修改 list 外層樣式 -->
}

.smt-title {
    <!-- 可通過(guò)此 class 修改主標(biāo)題樣式 -->
}

.smt-sub-title {
    <!-- 可通過(guò)此 class 修改副標(biāo)題樣式 -->
}

.smt-desc {
    <!-- 可通過(guò)此 class 修改右側(cè)輔助文案樣式 -->
}
{
    "navigationBarTitleText": "列表",
    "usingComponents": {
        "smt-list": "@smt-ui/component/src/list"
    }
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)