111 lines
3.2 KiB
Markdown
111 lines
3.2 KiB
Markdown
|
# 字母索引列表组件 (yxt-letterIndex)
|
|||
|
|
|
|||
|
|
用于uni-app项目的字母索引列表组件，支持按拼音首字母分组展示数据，右侧字母快速导航，适用于通讯录、学员列表等场景。
|
|||
|
|
|
|||
|
|
## 功能特点
|
|||
|
|
|
|||
|
|
- 支持按拼音首字母自动分组展示数据
|
|||
|
|
- 右侧快速字母导航，点击可快速滚动到对应区域
|
|||
|
|
- 滚动时自动高亮当前字母位置
|
|||
|
|
- 支持签到状态显示和补签操作
|
|||
|
|
- 空数据状态优化展示
|
|||
|
|
- 适配小程序环境
|
|||
|
|
|
|||
|
|
## 安装方式
|
|||
|
|
|
|||
|
|
在uni-app项目中，通过uni_modules直接导入使用。
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<yxt-letterIndex
|
|||
|
|
:items="studentList"
|
|||
|
|
name-key="name"
|
|||
|
|
:show-letter-title="true"
|
|||
|
|
current-status="pending"
|
|||
|
|
@help-sign="handleHelpSign"
|
|||
|
|
@letter-click="handleLetterClick"
|
|||
|
|
@scroll-position-change="handleScrollPositionChange"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
studentList: [
|
|||
|
|
{ name: '张三', id: '1' },
|
|||
|
|
{ name: '李四', id: '2' },
|
|||
|
|
{ name: '王五', id: '3' },
|
|||
|
|
{ name: '赵六', id: '4' },
|
|||
|
|
// 更多数据...
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 处理帮TA补签事件
|
|||
|
|
handleHelpSign(item) {
|
|||
|
|
console.log('帮TA补签:', item);
|
|||
|
|
// 执行补签操作
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理字母点击事件
|
|||
|
|
handleLetterClick(letter) {
|
|||
|
|
console.log('点击字母:', letter);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理滚动位置变化事件
|
|||
|
|
handleScrollPositionChange(letter) {
|
|||
|
|
console.log('当前滚动到字母:', letter);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.container {
|
|||
|
|
height: 100vh; /* 确保组件有足够的高度显示 */
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 属性说明
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|
|||
|
|
| --- | --- | --- | --- | --- |
|
|||
|
|
| items | Array | [] | 是 | 要展示的数据列表 |
|
|||
|
|
| name-key | String | "name" | 否 | 用于获取姓名的字段名 |
|
|||
|
|
| show-letter-title | Boolean | true | 否 | 是否显示字母标题 |
|
|||
|
|
| current-status | String | "pending" | 否 | 当前状态，pending表示未签到，signed表示已签到 |
|
|||
|
|
|
|||
|
|
## 事件说明
|
|||
|
|
|
|||
|
|
| 事件名 | 说明 | 回调参数 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| help-sign | 点击帮TA补签按钮时触发 | item: 当前点击的项目对象 |
|
|||
|
|
| letter-click | 点击右侧字母导航时触发 | letter: 点击的字母 |
|
|||
|
|
| scroll-position-change | 滚动位置发生变化时触发 | letter: 当前滚动到的字母 |
|
|||
|
|
|
|||
|
|
## 依赖说明
|
|||
|
|
|
|||
|
|
- 需要引入拼音工具 `pinyinUtil.js` 用于获取汉字的拼音首字母
|
|||
|
|
- 默认使用 `/static/icon-success.png` 和 `/static/img_no_content.png` 作为图标资源
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 组件需要一个固定高度的容器，建议设置为全屏或适当高度
|
|||
|
|
2. 确保数据格式正确，包含姓名字段
|
|||
|
|
3. 如需要自定义样式，可通过覆盖CSS变量或使用深度选择器修改
|
|||
|
|
4. 在小程序环境中使用时，请确保已配置相关的静态资源路径
|
|||
|
|
|
|||
|
|
## 兼容性
|
|||
|
|
|
|||
|
|
- 支持uni-app项目的Vue 2版本
|
|||
|
|
- 支持微信小程序环境
|
|||
|
|
|
|||
|
|
## 更新日志
|
|||
|
|
|
|||
|
|
详情请查看 [changelog.md](./changelog.md)
|