list-item 列表项
- 属性说明
- 示例
  - 代码示例

list-item 列表项

解释：列表项，支持三种样式可配，单行、多行列表、左右布局等，具体可看代码示例。适用于信息展示，并可放置在页面的任何位置。

属性说明

属性名	类型	必填	默认值	说明
type	String	否	‘single’	样式类型，single 单行、list 列表、multiple 左右两列布局
title	String	否	‘’	标题文案 `type === list` 时必填
label	String	否	‘’	左侧标题文案
content	String	否	‘’	右侧内容文案
list	Array	否	[]	列表数据：数据示例`[{label: ‘’, content: ‘’}]` 字段名可通过 listLabelName 和 listContentName 自定义
listLabelName	String	否	‘label’	自定义 list 渲染字段名 label
listContentName	String	否	‘content’	自定义 list 渲染字段名 content
disable	Boolean	否	false	是否禁用，非禁用自带点击态
smt-label	String	否		提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改标题区左侧文案样式
smt-content	String	否		提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改标题区右侧文案样式
smt-list-label	String	否		提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改列表区左侧文案样式
smt-list-content	String	否		提供扩展样式类，供开发者自定义组件样式。可通过此 class 修改列表区右侧文案样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

<view class="list-item-container">
    <block s-for="{{list}}">
        <block s-if="{{item.type === 'single'}}">
            <view class="title">{{item.title}}</view>
            <smt-list-item
                s-for="{{item.list}}"
                label="{{item.label}}"
                smt-label="smt-label"
                smt-content="smt-content"
                content="{{item.content}}"
                disable="{{item.disable}}"
            ></smt-list-item>
        </block>
        <block s-if="{{item.type === 'list'}}">
            <view class="title">{{item.title}}</view>
            <smt-list-item
                type="list"
                smt-list-label="smt-list-label"
                smt-list-content="smt-list-content"
                title="{{item.listTitle}}"
                list="{{item.list}}"
            ></smt-list-item>
        </block>
        <block s-if="{{item.type === 'multiple'}}">
            <view class="title">{{item.title}}</view>
            <smt-list-item
                type="multiple"
                list="{{item.list}}"
            ></smt-list-item>
        </block>
    </block>
</view>