描述：

从后端调用接口获取所有热的姓名，将这些名字的首字母排序，然后放到对应字母下面，最终效果图如下：

实现过程

**总体实现的思路是：**首先调用接口，获取所有员工的姓名以及其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“张三” 转为“ZS”）这里只需要名字的第一个字的首字母，使用js的截取功能就能实现，中文转拼音这里我使用的是js-pinyin，将转换好的内容渲染到页面上。
1、下载js-pinyin包
npm install js-pinyin
2、在main.js中引入js-pinyin
import pinyin from 'js-pinyin'
3、在methdos函数中调用接口获取名字的数据，这里的res就是获取回来的员工信息。获取回来的数据结构如下图

getData(){
				let nameArr = [];
				var that = this
				uni.request({
				    url: '获取员工信息的接口', 
				    data: {
					  id:that.id,
					  repairType:that.repairType
				    },
					method:'POST',
				    header: {
				      'content-type': 'application/x-www-form-urlencoded',
				      'Cookie': 'JSESSIONID=' + uni.getStorageSync('token')
				    },
					dataType:'json',
				    success: (res) => {
						console.log("选择员工的数据")
				        console.log(res)
						
				    }
				})
			},

4、实现中文转换为拼音的功能
（1）、当在组件中使用时，要先在export default前引用node_modules/js-pinyin中的index.js文件：
import pinyin from '…/…/…/node_modules/js-pinyin/index
注意node_modules/js-pinyin的文件路径

(2)、一个是引入js-pinyin，一个是配置js-pinyin。

let pinyin = require('js-pinyin')
pinyin.setOptions({checkPolyphone: false, charCase: 0})

（3）、在data中定义变量

data(){
	return{
		firstPin :["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
		namejson:{},//转换为拼音后的数据
	}
}

（4）、获取姓名，将其转为拼音

//循环数组，拿到所有的姓名
for(var i = 0 ; i < res.data.content.length ; i ++){
// 取所有姓名的首字母
	let peopleName = res.data.content[i].name
	// 取所有姓名的首字母
	let firstname = pinyin.getCamelChars(peopleName).substring(0, 1)
	//给原json添加首字母键值对
	res.data.content[i].first = firstname
	//放入新数组
	nameArr.push(res.data.content[i])
	// that.result.push(res.data.content[i].id)
}

（5）、整理完后的数据格式如下图：

转换为拼音的所有代码如下：

getData(){
				let nameArr = [];
				var that = this
				uni.request({
				    url: '获取员工信息的接口', 
				    data: {
					  id:that.id,
					  repairType:that.repairType
				    },
					method:'POST',
				    header: {
				      'content-type': 'application/x-www-form-urlencoded',
				      'Cookie': 'JSESSIONID=' + uni.getStorageSync('token')
				    },
					dataType:'json',
				    success: (res) => {
						console.log("选择员工的数据")
				        console.log(res)
						let dataArr = res.data.content
						let pinyin = require('js-pinyin')
						pinyin.setOptions({checkPolyphone: false, charCase: 0})
						//循环数组，拿到所有的姓名
						for(var i = 0 ; i < res.data.content.length ; i ++){
							// 取所有姓名的首字母
							let peopleName = res.data.content[i].name
							// 取所有姓名的首字母
							let firstname = pinyin.getCamelChars(peopleName).substring(0, 1)
							//给原json添加首字母键值对
							res.data.content[i].first = firstname
							//放入新数组
							nameArr.push(res.data.content[i])
							// that.result.push(res.data.content[i].id)
						}
						console.log(that.result)
						let namejson = {};
						//根据首字母键值对给原数据按首字母分类
						for (let i = 0; i < that.firstPin.length; i++) {    //这里的FirstPin是一个写入了所有字母的数组,见data中
							namejson[that.firstPin[i]] = nameArr.filter(function (value) {
								return value.first === that.firstPin[i]
							})
						}
						that.namejson = namejson
						console.log(that.namejson)
						console.log(that.namejson.Z )
						
						
						
				    }
				})
			},

前端页面渲染

1、前端布局
这里的布局使用的是van -weapp组件库的van-index-bar、van-index-ancho组件。

<view class="peopleName">
			<van-index-bar sticky-offset-top="70" highlight-color="#07c160"	>
			  <view v-for="(item,index) in namejson">
			  //如果item为空，则不显示index-anchor
			    <van-index-anchor :index="index" v-show="item == ' ' ? false : true" />
			    //再次循环某个字母下面的数据v-for="(ite,i) in item"
				<view class="People_item" v-for="(ite,i) in item" style="background: #FFFFFF;padding-left: 15px;">
					<!-- left -->
					<view class="People_item_left" style="display: flex;">
						<van-checkbox-group :value="result" @change="onChangePeople">
						  <van-checkbox  :name="ite.id" >
							  <van-image
							    round
							    width="3rem"
							    height="3rem"
							    :src="ite.icon == '' ? defaultIcon : ite.icon "
							  />
						  </van-checkbox>
						</van-checkbox-group>
						<view class="People_item_userInfor">
							<view class="" style="margin-bottom: 10px;">{{ite.name}}</view>
							<view class="">{{ite.phone}}</view>
						</view>
					</view>
					<view class="People_item_right">
						<view class="" style="margin-bottom: 10px;">{{ite.hrmDepName}}</view>
						<view class="">已接单：{{ite.unDeposeOrderCount}}</view>
						<!-- <image src="../../static/icon/photo.png" mode=""></image> -->
					</view>
				</view>
				
			  </view>
			
			
			
			</van-index-bar>
		</view>

参考文章：
https://www.cnblogs.com/lzb1234/p/11353152.html