主题
IndexList 索引列表
按分组展示列表并提供右侧索引,支持自定义列表项。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 分组索引列表 -->
<fui-index-list :listData="groups" @click="handleItemClick" />groups 为分组对象数组,每组使用 letter 表示索引、data 存放列表项,也可使用 descr 显示分组标题。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| listData | Array | 分组列表数据 | [] |
| height | Number / String | 分组标题高度,单位 rpx | 64 |
| color | String | 分组标题文字颜色 | #181818 |
| background | String | 分组标题背景色 | #F1F4FA |
| keyColor | String | 右侧索引文字颜色 | #7F7F7F |
| activeColor | String | 选中索引文字颜色 | #FFFFFF |
| activeBackground | String | 选中索引背景色 | #465CFF |
| isSelect | Boolean | 是否显示选择按钮 | false |
| borderColor | String | 未选中边框色 | #ccc |
| selectedColor | String | 选中边框和背景色 | #465CFF |
| isSrc | Boolean | 是否显示图片 | false |
| subRight | Boolean | 次要内容是否右对齐 | true |
| custom | Boolean | 是否自定义列表项 | false |
| isHeader | Boolean | H5 是否使用默认导航栏 | false |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| init | 列表初始化或数据改变 | — |
| click | 点击列表项 | index、subIndex、letter 和当前项字段 |
| scrolltolower | 滚动到底部 | — |
custom 为 true 时,item 作用域插槽提供 model、idx、index、last、isSelect、isSrc 和 subRight。
插槽
| 插槽 | 说明 |
|---|---|
| default | 列表顶部的自定义内容 |
| item | 自定义项目内容 |
| footer | 底部自定义内容 |