数字生活小程序
小程序
介绍开发设计运营

List 列表 APP
该方法或组件支持移动端小程序调用
 PC
该方法或组件支持桌面端小程序调用

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。

规则

  • 一般由主要信息、主要操作、次要信息、次要操作组成。
  • 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {List, Item} from '@21cnfe/vui'  
Vue.component('List', List)  
Vue.component('Item', Item)

代码演示

list 列表 lists
基本用法 单行展示，通过插槽方式添加自定义元素 
<template>
  <List>
    <Item>
      <div slot="title">Title</div>
      <div slot="content">extra content</div>
    </Item>
  </List>
</template>
多行 主副标题，同样通过插槽方式添加元素 
<template>
  <Item multipleLine>
      <div slot="title">主标题</div>
      <div slot="subtitle">副标题</div>
      <div slot="content"></div>
    </Item>
    <Item multipleLine :thumb="thumb">
      <div slot="title">主标题</div>
      <div slot="subtitle">副标题</div>
      <div slot="content"><Icon type="ellipsis"></Icon></div>
    </Item>
  </List>
</template>
类型 可选类型有 checkbox 与 message ，不同的展现方式，checkbox List 在 SelectList 组件中有更完善的功能 
<template>
  <List>
    <Item type="checkbox">
      <div slot="checkbox"><checkbox></checkbox></div>
      <div slot="title">Checkbox List</div>
      <div slot="content"><Icon type="ellipsis"></Icon></div>
    </Item>
    <Item type="message" multipleLine arrow="down">
      <div slot="title">Message List</div>
      <div slot="subtitle">副标题</div>
      <div slot="content"></div>
    </Item>
  </List>
</template>

API

Item组件

属性 说明 类型 默认值
muitipleLine 是否显示额外信息 Boolean false
arrow 设置箭头方向，可选值为：horizontal,up,down和empty String 无
type 设置 Item 类型，可选值为：message和checkbox，checkbox 类型在SelectList 组件中有更完善的功能 String 无

List组件子元素的属性Slot

属性 说明
"header" 填充列表header部分的内容
无 填充列表body部分的内容

Item组件子元素的属性Slot

属性 说明
"title" 填充item主标题部分的内容
"subtitle" 填充item副标题部分的内容
"content" 填充item详情部分的内容
  1. 1. List 列表 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
    4. 1.4. API
      1. 1.4.0.1. Item组件
      2. 1.4.0.2. List组件子元素的属性Slot
      3. 1.4.0.3. Item组件子元素的属性Slot