uni-app中需将原始数据预处理为group+list嵌套结构：提取首字母（中文转拼音）、归类、过滤空名和空组，统一group大写，英文/数字归#组，再传入uni-indexed-list。
uni-app里怎么把列表按首字母分组？
直接用原始数据做分组会出错，因为 uni-index-list 组件不接受扁平数组，它要求数据必须是「带 group 字段的嵌套结构」。常见错误是传入一个普通数组，结果索引条不显示、点击无响应、控制台也没报错——其实是组件根本没识别到分组信息。
正确做法是先对原始数据做预处理：提取每个项的首字母（注意中文取拼音首字母），再按字母归类，最后组装成 group + list 的格式。别依赖后端返回这种结构，前端自己规整更可控。
- 中文名要用
pinyin库转拼音（推荐轻量版tiny-pinyin），不能用charCodeAt() - 英文/数字开头的项建议统一归入
#组，避免出现一堆单字母组 - 空字符串或 null 名称要过滤掉，否则会卡在
group: ""这种非法分组里
uni-index-list 的 data 格式长什么样？
uni-index-list 的 data 属性必须是数组，每一项必须含 group（字符串）和 list（数组）两个字段。漏掉任意一个，分组标题就消失，或者列表项全堆在第一组里。
示例结构：
[{
"group": "A",
"list": [{"name": "Apple"}, {"name": "Android"}]
}, {
"group": "B",
"list": [{"name": "Banana"}]
}, {
"group": "#",
"list": [{"name": "123Test"}, {"name": "测试"}]
}]
-
group值区分大小写，建议统一转大写，否则 “a” 和 “A” 会被当成两个组 -
list里每个对象可以有任意字段，但必须是纯对象，不能是字符串或 null - 如果某组
list为空数组，该组仍会显示标题，但没内容——想隐藏就得提前过滤掉空组
为什么 index 属性没反应？
很多人给 uni-index-list 加了 index 属性（比如 index="['A','B','#']"），却发现右侧索引条不显示。原因通常是：组件内部默认只渲染 data 中实际存在的 group 值，index 只是“可选快捷入口”，不会强制显示未包含的字母。
- 如果数据里没有
group: "C"，哪怕index里写了"C"，点击也没跳转目标 - 想让索引条完整显示 A–Z + #，得手动补全所有可能的
group（哪怕对应list为空），再配合index控制顺序 - 移动端真机上，
index点击区域小，建议加index-bar-style="height: 30px;"扩大触控范围
性能差、滚动卡顿怎么办？
当分组数超过 20、总数据量过千时，uni-index-list 渲染会明显变慢，尤其在低端安卓机上。这不是 bug，而是组件内部对每组都做了完整 v-for 渲染，没做虚拟滚动。
- 优先精简
list每项的 DOM 结构，去掉冗余view嵌套和未使用的slot - 分组前先用
slice(0, 50)限制每组最多显示 50 条，长列表用「加载更多」代替全量渲染 - 不要在
list对象里放大型图片 base64 或复杂计算属性，改用懒加载 + 占位图
真正难处理的是中英文混排时的首字母提取逻辑，比如 “iPhone” 要归到 I 还是 #，这个边界情况容易被忽略，得在分组前单独写判断。
