# 索引列表

# 平台差异

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}

# 示例

基本用法

<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>