字母索引列表组件 (yxt-letterIndex)

用于uni-app项目的字母索引列表组件，支持按拼音首字母分组展示数据，右侧字母快速导航，适用于通讯录、学员列表等场景。

功能特点

• 支持按拼音首字母自动分组展示数据
• 右侧快速字母导航，点击可快速滚动到对应区域
• 滚动时自动高亮当前字母位置
• 支持签到状态显示和补签操作
• 空数据状态优化展示
• 适配小程序环境

安装方式

在uni-app项目中，通过uni_modules直接导入使用。

使用示例

<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