Skip to content

IndexList 索引列表 ​

按分组展示列表并提供右侧索引,支持自定义列表项。

支持平台 ​

以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。

App-vueApp-nvue微信小程序支付宝小程序百度小程序字节小程序QQ小程序H5PC快手小程序钉钉小程序
✓✓✓✓✓✓✓✓✓✓✓

基础用法 ​

vue
<!-- 分组索引列表 -->
<fui-index-list :listData="groups" @click="handleItemClick" />

groups 为分组对象数组,每组使用 letter 表示索引、data 存放列表项,也可使用 descr 显示分组标题。

属性 ​

属性类型说明官网默认值
listDataArray分组列表数据[]
heightNumber / String分组标题高度,单位 rpx64
colorString分组标题文字颜色#181818
backgroundString分组标题背景色#F1F4FA
keyColorString右侧索引文字颜色#7F7F7F
activeColorString选中索引文字颜色#FFFFFF
activeBackgroundString选中索引背景色#465CFF
isSelectBoolean是否显示选择按钮false
borderColorString未选中边框色#ccc
selectedColorString选中边框和背景色#465CFF
isSrcBoolean是否显示图片false
subRightBoolean次要内容是否右对齐true
customBoolean是否自定义列表项false
isHeaderBooleanH5 是否使用默认导航栏false

事件 ​

事件说明回调参数
init列表初始化或数据改变—
click点击列表项index、subIndex、letter 和当前项字段
scrolltolower滚动到底部—

custom 为 true 时,item 作用域插槽提供 model、idx、index、last、isSelect、isSrc 和 subRight。

插槽 ​

插槽说明
default列表顶部的自定义内容
item自定义项目内容
footer底部自定义内容