索引列表

平台差异

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

Props

参数	说明	类型	可选值	默认值
index	序号	number		0
list	列表数据	array
filterable	是否带有过滤栏	boolean		true

Methods

事件名称	说明	参数
setData	设置数据	function(index)
doLayout	更新页面结构, 当数据列表发生变化时	function

Events

事件名称	说明	回调参数
change	选择或者滚动时触发改变	function(item)
search	搜索框搜索时触发	function(keyword)
select	列表项点击时	function(item)

Slots

插槽名称	说明	回调参数
default	列表内容	{item, parent}
header	列表头	{item, isActive}
prepend	追加内容到列表前
append	追加内容到列表后

示例

基本用法

<template>
	<cl-list-index :index="1" :list="list"> </cl-list-index>
</template>

<script>
	export default {
		data() {
			return {
				// list 格式如下
				list: [
					{
						label: "A",
						children: [
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg",
								name: "阿雪"
							},
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/3.jpg",
								name: "阿良"
							},
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/2.jpg",
								name: "阿绵"
							}
						]
					},
					{
						label: "C",
						children: [
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg",
								name: "陈杨"
							},
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/6.jpg",
								name: "陈飞"
							},
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/7.jpg",
								name: "陈品如"
							},
							{
								avatarUrl:
									"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/4.jpg",
								name: "陈逸"
							}
						]
					}
				]
			};
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}
</style>

使用插槽

<cl-list-index :index="1" :list="list">
	<!-- 列表头插槽 -->
	<template #header="{ item, isActive }"> {{ item.label }} </template>

	<!-- 列表内容插槽 -->
	<template v-slot="{ item, parent }"> {{ item.name }} </template>
</cl-list-index>