甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

创新互联百度小程序教程：list-item列表项

  • 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
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  {{item.title}}
      5.   
  
  
    5.  
      6.   
  
  
    6.  s-for="{{item.list}}"
      7.   
  
  
    7.  label="{{item.label}}"
      8.   
  
  
    8.  smt-label="smt-label"
      9.   
  
  
    9.  smt-content="smt-content"
      10.   
  
  
    10.  content="{{item.content}}"
      11.   
  
  
    11.  disable="{{item.disable}}"
      12.   
  
  
    12.  >
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  {{item.title}}
      16.   
  
  
    16.  
      17.   
  
  
    17.  type="list"
      18.   
  
  
    18.  smt-list-label="smt-list-label"
      19.   
  
  
    19.  smt-list-content="smt-list-content"
      20.   
  
  
    20.  title="{{item.listTitle}}"
      21.   
  
  
    21.  list="{{item.list}}"
      22.   
  
  
    22.  >
      23.   
  
  
    23.  
      24.   
  
  
    24.  
      25.   
  
  
    25.  {{item.title}}
      26.   
  
  
    26.  
      27.   
  
  
    27.  type="multiple"
      28.   
  
  
    28.  list="{{item.list}}"
      29.   
  
  
    29.  >
      30.   
  
  
    30.  
      31.   
  
  
    31.  
      32.   
  
  
      33.

    名称栏目：创新互联百度小程序教程：list-item列表项
    文章地址：https://chengdu.cdxwcx.cn/article/dpdgoeg.html

    其他资讯