List 列表

常用于批量数据或菜单的展示，并且指引跳转详情

提示

该组件只提供布局容器，内容自行通过slot设置

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

示例

基本用法

<pi-card padding="32rpx 0">
  <template slot="body">
    <pi-list title="列表面板">
      <pi-list-item title="标题1" />
      <pi-list-item title="标题2" desc="描述文本1" />
      <pi-list-item title="标题3" desc="描述文本2" extra-text="额外文本" />
    </pi-list>
  </template>
</pi-card>

隐藏右侧图标

可通过 show-right-icon 设置是否显示列表右侧的箭头

<pi-list title="隐藏右侧图标">
  <pi-list-item v-for="item in 3" :key="item" :show-right-icon="false">
    {{ item }}
  </pi-list-item>
</pi-list>

禁用行

可通过 disabled 设置列表为禁用列表

<pi-list title="禁用行">
  <pi-list-item v-for="item in 3" :key="item" disabled>
    {{ item }}
  </pi-list-item>
</pi-list>

左侧slot

<pi-list title="左侧slot" desc="slot left">
  <pi-list-item title="标题标题" desc="描述">
    <pi-icon slot="left" name="commentfill" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="是否开启版本更新提示" desc="更快更轻">
    <pi-icon slot="left" name="activity-fill" size="50" custom-class="pi-primary" dot />
    <pi-switch slot="right" size="40" active-color="#ff508a" />
  </pi-list-item>
  <pi-list-item title="点击更新" desc="更快更轻">
    <pi-icon slot="left" name="tasklist-fill" size="50" custom-class="pi-primary" dot />
    <pi-button slot="right" type="primary" size="tiny">更新</pi-button>
  </pi-list-item>
</pi-list>

右侧slot

<pi-list title="右侧slot" desc="slot right">
  <pi-list-item title="中文">
    <pi-checkbox slot="right" active-mode="fill" shape="round" :value="true" />
  </pi-list-item>
  <pi-list-item title="英文">
    <pi-checkbox slot="right" active-mode="fill" shape="round" />
  </pi-list-item>
</pi-list>

示例

<pi-list title="示例">
  <pi-list-item title="订单记录">
    <pi-icon slot="left" name="order1" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="我的">
    <pi-icon slot="left" name="mine" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="个人信息">
    <pi-icon slot="left" name="form" size="50" custom-class="pi-primary" />
  </pi-list-item>
  <pi-list-item title="系统设置">
    <pi-icon slot="left" name="setup-fill" size="50" custom-class="pi-primary" />
  </pi-list-item>
</pi-list>

Props

名称	描述	类型	必选	默认值
customStyle	自定义样式	Object	false	{}
customClass	自定义样式类	String	false	''
height	列表高度	String | Number	false	null
title	列表面板标题	String	false	''
desc	列表面板描述	String	false	''
titleStyle	标题自定义样式	Object	false	{}
border	是否显示边框	Boolean	false	true
showRightIcon	是否显示右边icon	Boolean	false	false
hoverClass	列按压时的样式类，"none"为无效果	String	false	null

Slots

名称	描述	插槽内容
default	-	-

ListItem

Props

名称	描述	类型	必选	默认值
customStyle	自定义样式	Object	false	{}
customClass	自定义样式类	String	false	''
height	列表高度	String/Number	false	110
title	标题	String	false	''
titleStyle	标题自定义样式	Object	false	{}
desc	描述	String	false	''
descStyle	描述自定义样式	Object	false	{}
extraText	右侧文字	String	false	''
extraStyle	右侧文字自定义样式	Object	false	{}
disabled	是否禁用	Boolean	false	false
border	是否显示边框	Boolean	false	true
padding	列表项内边距	String	false	'24rpx 32rpx'
hoverClass	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	String	false	'pi-hover-class'
hoverStartTime	按住后多久出现点击态，单位毫秒	String/Number	false	10
hoverStayTime	手指松开后点击态保留时间，单位毫秒	String/Number	false	100
showRightIcon	是否显示右边icon	Boolean	false	true
rightIcon	右侧icon样式, 对象形式	Object	false	rightIcon配置项

Right Icon

以下属性覆盖pi-icon配置，其余属性参考icon配置项

参数	说明	类型	可选值	默认值
name	图标名称或图片链接	Object	-	'right'
color	图标颜色	String	-	'#cccccc'

Events

事件名	描述	参数
click	点击列表项时触发	-
mouseenter	鼠标进入列表项时触发	-
mouseleave	鼠标离开列表项时触发	-
click-right	点击右侧列表项时触发	-
click-left	点击左侧列表项时触发	-
mousedown	鼠标按下列表项时触发	-
mouseup	鼠标松开列表项时触发	-
mousemove	鼠标移动列表项时触发	-

Slots

名称	描述	插槽内容
left	左侧区域插槽	-
default	中间区域插槽	-
right	右侧区域插槽	-

MixIns

MixIn
extendPiList