阅读(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"
    }
}