列表

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Props

参数	说明	类型	可选值	默认值
label	标题	string
disabled	是否禁用	boolean		false
border	是否带边框	boolean		true
type	类型	string	primary / success / error / warning / info
justify	水平排序方式	string	start / end / center	start
swipe	是否可滑动	string	none / left / right	none

Slots

插槽	说明
icon	左侧图标
append	在元素的结尾插入内容
menu	滑动菜单

示例

基本用法

<cl-list label="账单"> </cl-list>

带图标

<cl-list-item label="总资产">
	<image slot="icon" :src="require('@/static/icon/all.png')" alt />
</cl-list-item>

带描述

<cl-list-item label="余额">
	<cl-text type="price" :size="30" :value="159.2"></cl-text>
</cl-list-item>

禁用

<cl-list-item label="银行卡" disabled>
	<text>兴业银行(***1113)</text>
</cl-list-item>

滑动

<cl-list-item label="右滑动" swipe="left">
	<text slot="append" class="cl-icon-arrow-right"></text>

	<view class="append" slot="menu">
		<button class="primary-btn">置顶</button>
		<button class="error-btn">删除</button>
	</view>
</cl-list-item>

<cl-list-item label="左滑动" swipe="right">
	<text slot="append" class="cl-icon-arrow-right"></text>

	<view class="append" slot="menu">
		<button class="primary-btn">置顶</button>
		<button class="error-btn">删除</button>
	</view>
</cl-list-item>

自定义

<cl-list-item type="success">
	<view class="cs-block">
		<cl-avatar
			src="https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg"
		></cl-avatar>
		<text>神仙都没用</text>
	</view>

	<view class="append" slot="append">
		<cl-button type="primary">修改头像</cl-button>
	</view>
</cl-list-item>