基于uview+vue-py.js实现的字母索引排序功能

准备工作

1.vue-py.js
链接：点击这里跳百度网盘
提取码：n5d1

2.引入uview框架

2.将vue-py.js里的文件路径改成自己的引入路径

<template>
	<view>
		<u-index-list :index-list="indexList">
			<template v-for="(item, index) in list">
				<u-index-item>
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<view class="list-cell justify-between" v-for="(cell, index) in item">
						<view class="cell-name">
							{{cell.name}}
						</view>
						<u-icon name="star" size="20"></u-icon>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	import vPinyin from '@/common/vue-py/vue-py.js';
	export default {
		data() {
			return {
				indexList: [],
				list: [],
				adviceType: ''
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				let list = [];
				let indexList = []; //字母索引
				let arr = [{
					"name": "蜀道之难",
					"type": "yry"
				}, {
					"name": "难于上青天",
					"type": "yry"
				}, {
					"name": "蚕丛及鱼凫",
					"type": "yry"
				}, {
					"name": "开国何茫然",
					"type": "tp"
				}, {
					"name": "尔来四万八千岁",
					"type": "yry"
				}, {
					"name": "不与秦塞通人烟",
					"type": "yry"
				}, {
					"name": "西当太白有鸟道",
					"type": "tp"
				}, {
					"name": "可以横绝峨眉巅",
					"type": "yry"
				}, {
					"name": "地崩山摧壮士死",
					"type": "yry"
				}, {
					"name": "然后天梯石栈相钩连",
					"type": "yry"
				}, {
					"name": "上有六龙回日之高标",
					"type": "yry"
				}, {
					"name": "下有冲波逆折之回川",
					"type": "tp"
				}]
				arr.forEach(ele => {
					list.push({
						name: ele.name,
						letter: vPinyin.chineseToPinYin(ele.name),
						type: ele.type
					})
				})


				list.sort((a, b) => { //字母排序
					if (a.letter > b.letter) {
						return 1;
					} else if (a.letter < b.letter) {
						return -1;
					} else {
						return 0;
					}
				})
				const groups = list.reduce((acc, curr) => { //按字母分组
					const letter = curr.letter;
					if (acc[letter]) {
						acc[letter].push(curr);
					} else {
						acc[letter] = [curr];
					}
					return acc;
				}, {});
				list = Object.values(groups);
				list.forEach(ele => {
					indexList.push(ele[0].letter)
				})
				this.list = list;
				this.indexList = indexList;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 70rpx 10rpx 25rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;

		.cell-name {
			width: 570rpx;
		}
	}
</style>
``