uniapp拼音排序功能

1、下载vue-py.js

百度网盘：https://pan.baidu.com/s/1xHNTZma5FHZNrc86fKerrw

提取码：n5d1

2、colorUI通过hbuilderX引入到页面中

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

uniapp

template

<template>
	<view>
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px)'}]" :scroll-with-animation="true" :enable-back-to-top="true">
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item" :id="'indexes-' + item" :data-index="item">
					<view class="cu-bar bg-white solid-bottom margin-top" v-if="item">
						<view class="action">
							<text class="cuIcon-title text-orange">{{item}}</text>
						</view>
					</view>
					<view class="cu-list menu">
						<view class="cu-item" v-for="(name,i) in names" :key="i" v-if="names[index][i]">
							<view class="content">
								<text class="text-grey text-lg">{{names[index][i]}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur">{{item}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

script

	var _this;
	import vPinyin from '../../mw/vue-py.js';
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				listCur: '',
				FristPin: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
				items: {},
				list: [],
				names:[]
			};
		},
		onLoad() {
			_this = this
			
			uni.request({
				url:'http://localhost:10002',
				method:'GET',
				header:'',
				success:function(res){
					var itemArr = [];
					for (let i = 0; i < res.data.length; i++) {
						//遍历数组,拿到文字名称
						let itemName = res.data[i].name;
						//取全部文字的首字母
						let fristName = vPinyin.chineseToPinYin(res.data[i].name); //这里截取首字母的第一位
						//给原json添加首字母键值对
						res.data[i].first = fristName;
						//放入新数组
						itemArr.push(res.data[i]);
					}
					// console.log(itemArr)
					// return false
					let items = {};
					//根据首字母键值对给原数据按首字母分类
					for (let i = 0; i < _this.FristPin.length; i++) {//这里的FirstPin是一个写入了所有字母的数组,见data中
						var thisFristPin = _this.FristPin[i];
						items[_this.FristPin[i]] = itemArr.filter(function(value) {
							return value.first === thisFristPin;
						});
					}
					// console.log(items)
					// return false
					let thisFirst = '';
					var nameArr = [];
					for (let i = 0; i < 22; i++) {//22个字母
						let thisLength = items[_this.FristPin[i]].length;//当前首字母有几个同字母的字段
						if(thisLength > 0){//大于0，排除空数组
							for(let j = 0 ;j < thisLength;j++){
								let newFirst = items[_this.FristPin[i]][j].first;//获取当前字母
								if(thisFirst == newFirst){//判断当前字母和获取字母是否相同
									nameArr.push(items[_this.FristPin[i]][j].name);
									continue;
								}else{
									thisFirst = newFirst;
									nameArr = [];
									nameArr.push(items[_this.FristPin[i]][j].name)
								}
								
								_this.list.push(newFirst);//输出结果
								_this.names.push(nameArr);
							}
						}
					}
					
				}
			})
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id];
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				var thatCur = this.listCur;
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num]
				}if(this.listCur == undefined){//当滑动为空时获取最后的字母显示
					this.listCur = thatCur
				};
				console.log(this.listCur)
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i];
						that.movableY = i * 20
						return false
					}
				}
			}
		}
	}

style

	page{height: 100%;}
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}

php

<?php
$arr = array(
	array('name'=>'宝马'),
	array('name'=>'奔驰'),
	array('name'=>'奥迪'),
	array('name'=>'法拉利'),
	array('name'=>'本田'),
	array('name'=>'大众'),
	array('name'=>'长安'),
	array('name'=>'丰田'),
	array('name'=>'福特'),
	array('name'=>'哈弗'),
	array('name'=>'红旗'),
	array('name'=>'海马'),
	array('name'=>'捷豹'),
	array('name'=>'捷达'),
	array('name'=>'吉普'),
	array('name'=>'凯迪拉克'),
	array('name'=>'路虎'),
	array('name'=>'斯柯达'),
);

echo json_encode($arr,true);