阅读(2733)
赞(7)
百度智能小程序 列表
2020-09-02 16:16:28 更新
list 列表
解释:列表组件,支持配置主标题文案、副标题文案、辅助信息、图标等。适用于信息展示,并可放置在页面的任何位置。
属性说明
属性名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
title |
String |
是 |
'' |
主标题文案 |
subTitle |
String |
否 |
'' |
副标题文案 |
desc |
String |
否 |
'' |
右侧辅助文案 |
imgSrc |
String |
否 |
'' |
图片链接 |
disable |
Boolean |
否 |
true |
是否有点击态 |
smt-list-container |
String |
否 |
提供扩展样式类,供开发者自定义组件样式。可通过此 class 修改 list 外层样式 |
|
smt-title |
String |
否 |
提供扩展样式类,供开发者自定义组件样式。可通过此 class 修改主标题样式 |
|
smt-sub-title |
String |
否 |
提供扩展样式类,供开发者自定义组件样式。可通过此 class 修改副标题样式 |
|
smt-desc |
String |
否 |
提供扩展样式类,供开发者自定义组件样式。可通过此 class 修改右侧辅助文案样式 |
示例
代码示例
<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: '列表信息超长文本',
subTitle: '副标题',
desc: '辅助信息',
imgSrc: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/swan-demo-smt-grid.png',
disable: true
}
}
});
.smt-list-container {
<!-- 可通过此 class 修改 list 外层样式 -->
}
.smt-title {
<!-- 可通过此 class 修改主标题样式 -->
}
.smt-sub-title {
<!-- 可通过此 class 修改副标题样式 -->
}
.smt-desc {
<!-- 可通过此 class 修改右侧辅助文案样式 -->
}
{
"navigationBarTitleText": "列表",
"usingComponents": {
"smt-list": "@smt-ui/component/src/list"
}
}