描述：
从后端调用接口获取所有热的姓名，将这些名字的首字母排序，然后放到对应字母下面，最终效果图如下：
实现过程
**总体实现的思路是：**首先调用接口，获取所有员工的姓名以及其他信息，将获取回来的中文名字转换为拼音，这里做的是转为姓名首字母大写的简写格式（比如：“张三” 转为“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