前端将中文名字按照姓氏拼音排序并分组，并且将数据应用到索引列表里面

1.下载 js-pinyin ，并且在main.js和页面中引用，本人用的是uniapp开发的索引列表

npm install js-pinyin --save

import pinyin from 'js-pinyin'
import pinyin from '../../node_modules/js-pinyin/index.js'

 

 2.通过此代码向遍历学生列表，并且在学生信息中添加学生姓名首字母的ID

res.data[items.id].forEach((item, index) => {
	let wordName = item.name
	let firstName = pinyin.getCamelChars(wordName)[0].substring(0, 1).toUpperCase()
	if (this.indexList.includes(firstName) == true) {
		item.id = firstName;
	}
	newArrs.push(item)
})
res.data[items.id] = newArrs

3. 将学生按照姓氏进行排序

res.data[items.id].sort((a, b) => a['name'].localeCompare(b['name']))

4.将同一个姓氏的学生分到同一个组里面

 

代码和数据结构如下

this.StuList = arr
this.StuList[0].pic = ''
let dataInfo = {};
this.StuList.forEach((item, index) => {
	let {id} = item;
	if (!dataInfo[id]) {
		dataInfo[id] = {id,child: []}
	}
	dataInfo[id].child.push(item);
});
let list = Object.values(dataInfo); // list 转换成功的数据

 

 5.数据处理完毕后，开始渲染页面，手写索引列表，索引列表用到了 scroll-view，上面是部分页面结构，下面是js代码。css就不写了

<!-- 左侧通讯录 -->
				<scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView"
					scroll-with-animation="true" @scroll='onScroll_1'>
					<view class="address-book" ref="aaa" v-for="(item_arr, index) in StuList" :key="index"
						:id="item_arr.id">
						<view class="address-book-index">{{ item_arr.id }}</view>
						<u-grid :border="true" col="3">
							<u-grid-item v-for="(item,index) in item_arr.child" :key="index">
								<div class="grid-item" @click="choose(item)" v-show="item.name=='全选'">
									<div class="Select">
										<u-icon name="checkmark-circle" v-show="item.SelectAllItem==false"
											color="#f4f4f5" size='20px'></u-icon>
										<u-icon name="checkmark-circle" color='#2979ff'
											v-show="item.SelectAllItem==true" size='20px'></u-icon>
									</div>
									<div class="Grid_img">
										<image :src="item.pic" mode="" v-show="item.pic!=''"></image>
										<image v-show="item.pic==''" src="../../static/headSculpture.png" mode="">
										</image>
									</div>
									<div class="Grid_Text">
										<text class="grid-text">{{item.name}}</text>
									</div>
								</div>
								<div class="grid-item" @click="allChoose(item)" v-show="item.name!='全选'">
									<div class="Select">
										<u-icon name="checkmark-circle" v-show="item.Select==false" color="#f4f4f5"
											size='20px'></u-icon>
										<u-icon name="checkmark-circle" color='#2979ff' v-show="item.Select==true"
											size='20px'></u-icon>
									</div>
									<div class="Grid_img">
										<image :src="item.pic" mode="" v-show="item.pic!=''"></image>
										<image v-show="item.pic==''" src="../../static/headSculpture.png" mode="">
										</image>
									</div>
									<div class="Grid_Text">
										<text class="grid-text">{{item.name}}</text>
									</div>
								</div>
							</u-grid-item>
						</u-grid>
					</view>
				</scroll-view>
				<!-- 右侧字母导航条 -->
				<view class="letter-nav">
					<view :class="ToID==item?'item':'item_1'" v-for="(item, index) in indexList" :key="index"
						@click="toSelectIndex(item)">
						{{ item }}
					</view>
				</view>

// 滑动的时候索引高亮
			onScroll_1(e) {
				var positiveNumber = []
				this.$refs.aaa.forEach((item, index) => {
					if (Math.ceil(item.$el.getBoundingClientRect().bottom) - 142 >= 0) {
						positiveNumber.push({
							'num': Math.ceil(item.$el.getBoundingClientRect().bottom),
							'Ele': item.$el.id
						})
					}
				})
				var index = 0;
				var min = positiveNumber[index].num
				positiveNumber.forEach((item, index) => {
					if (min > positiveNumber[index].num) {
						min = positiveNumber[index].num
						index = index
					}
				})
				this.ToID = positiveNumber[index].Ele
			},
			// 点击索引跳转
			toSelectIndex(items) {
				this.StuList.forEach(item => {
					if (item.id == items) {
						this.toView = items;
						this.ToID = items
					}
				})
			},