后浪云百度小程序教程：list-item 列表项

2022-2-8

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>

作者：后浪云

链接：https://www.idc.net/help/186005/

文章版权归作者所有，未经允许请勿转载。

THE END