uniapp [全端兼容] - 详细实现全国城市列表A-Z市区名称索引功能，根据城市首字母分类排序城市列表选择页面，全屏省市区右侧悬浮字母索引可拖曳滑动及点击定位锚点城市名称（提供最新全国城市数据）

前言

网上的教程各端兼容性太差且代码太乱，本文将提供优质的功能示例供复制使用。

在 uni-app 全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）项目开发中，详解完成整个页面 “全国城市选择” 索引列表，传入您后端返回的城市数据自动计算并排列到列表中，识别城市名首字母后按顺序排列排序，右侧悬挂 a~z 字母索引可点击跳转到对应的城市市区名，也可以按住拖动索引字母快速上下滑动，类似美团城市选择、购买火车或飞机票选择城市页面，支持自定义数据结构、页面各种样式、索引字母大小及位置、城市列表样式等。

uniapp（v2 | v3）版本项目均可使用，跟着教程复制代码运行稍加改造即可。

---

如下图所示，附带全国城市列表源数据文件，使用丝滑流畅不卡顿。

详细示例代码及注释，保证新手100%完美使用。

准备开始

我们先来看一下