1:手机端的UI框架，索引列表的代码格式大都类似，以uView为例,
2:安装汉字转拼音插件: npm i vue-py
或者
手动下载引入 vue-py.js 文件,（手动下载会有两个文件一个是vue-py.js;另一个是：const.js转译文件）
3:封装返回如下图结构的函数，并在页面是使用；

<template>
<u-index-list :scrollTop="scrollTop">
    <view v-for="(item, index) in list" :key="index">
            <u-index-anchor :index="item.letter" />
        <view class="list-cell u-border-bottom" v-for="(item1, index) in item.list" :key="index" >
            {{item1.name}}
        </view>
    </view>
</u-index-list>
</template>

<script>
  import vPinyin from "./vue-py";
    export default {
            data(){
                return{
                   scrollTop: 0,
                    indexList: [],//导航字母
                list:[],//对应的项
                }
            },
            methods:{
                      citys(){
                          let params={
                              XXXXX
                           }
                         getCitys(params).then(res => {
                    let resData = res.data;
                    resData.forEach((item, index) => {
                        resData[index].pyName = vPinyin.chineseToPinYin(item.name);
                    })
                    let resault = this.data_letter_sort(resData, "pyName");
                    this.list = resault
                    resault.forEach(function(item,index){
                      this.indexList.push(item.letter);
                    })
                }).catch(error => {

              })，
                       },
                        data_letter_sort(data, field) {
                var letter_reg = /^[A-Z]$/;
                var list = new Array();
                var letter;
                var items = new Array();
                for (var i = 0; i < data.length; i++) {
                    // 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
                    list["#"] = new Array();
                    // 首字母 转 大写英文
                    letter = data[i][field].substr(0, 1).toUpperCase();
                    // 是否 大写 英文 字母
                    if (!letter_reg.test(letter)) {
                        letter = "#";
                    }
                    // 创建 字母 分组
                    if (!(letter in list)) {
                        list[letter] = new Array();
                        // items = new Array();
                    }
                    // 字母 分组 添加 数据
                    list[letter].push(data[i]);
                    // items.push(data[i]);
                }
                // 转换 格式 进行 排序；
                var resault = new Array();
                for (var key in list) {
                    resault.push({
                        letter: key,
                        list: list[key]
                    });
                }
                resault.sort(function(x, y) {
                    return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
                });
                // # 号分组 放最后
                var last_arr = resault[0];
                resault.splice(0, 1);
                resault.push(last_arr);
                return resault;
            }
            }
        }
</script>

后台返回的数据 通过 上面data_letter_sort函数的封装返回，如下图：

微信图片_20200709171225.png

好了，，到这里就结束了，有什么不明白的欢迎来联系我。