描述：

從后端調(diào)用接口獲取所有熱的姓名，將這些名字的首字母排序，然后放到對應(yīng)字母下面，最終效果圖如下：

實(shí)現(xiàn)過程

**總體實(shí)現(xiàn)的思路是：**首先調(diào)用接口，獲取所有員工的姓名以及其他信息，將獲取回來的中文名字轉(zhuǎn)換為拼音，這里做的是轉(zhuǎn)為姓名首字母大寫的簡寫格式（比如：“張三” 轉(zhuǎn)為“ZS”）這里只需要名字的第一個字的首字母，使用js的截取功能就能實(shí)現(xiàn)，中文轉(zhuǎn)拼音這里我使用的是js-pinyin，將轉(zhuǎn)換好的內(nèi)容渲染到頁面上。
1、下載js-pinyin包
npm install js-pinyin
2、在main.js中引入js-pinyin
import pinyin from 'js-pinyin'
3、在methdos函數(shù)中調(diào)用接口獲取名字的數(shù)據(jù)，這里的res就是獲取回來的員工信息。獲取回來的數(shù)據(jù)結(jié)構(gòu)如下圖

getData(){let nameArr = [];var that = thisuni.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("選擇員工的數(shù)據(jù)")console.log(res)}})},

4、實(shí)現(xiàn)中文轉(zhuǎn)換為拼音的功能
（1）、當(dāng)在組件中使用時，要先在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:{},//轉(zhuǎn)換為拼音后的數(shù)據(jù)} }

（4）、獲取姓名，將其轉(zhuǎn)為拼音

//循環(huán)數(shù)組，拿到所有的姓名 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//放入新數(shù)組nameArr.push(res.data.content[i])// that.result.push(res.data.content[i].id) }

（5）、整理完后的數(shù)據(jù)格式如下圖：

轉(zhuǎn)換為拼音的所有代碼如下：

getData(){let nameArr = [];var that = thisuni.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("選擇員工的數(shù)據(jù)")console.log(res)let dataArr = res.data.contentlet pinyin = require('js-pinyin')pinyin.setOptions({checkPolyphone: false, charCase: 0})//循環(huán)數(shù)組，拿到所有的姓名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//放入新數(shù)組nameArr.push(res.data.content[i])// that.result.push(res.data.content[i].id)}console.log(that.result)let namejson = {};//根據(jù)首字母鍵值對給原數(shù)據(jù)按首字母分類for (let i = 0; i < that.firstPin.length; i++) { //這里的FirstPin是一個寫入了所有字母的數(shù)組,見data中namejson[that.firstPin[i]] = nameArr.filter(function (value) {return value.first === that.firstPin[i]})}that.namejson = namejsonconsole.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" />//再次循環(huán)某個字母下面的數(shù)據(jù)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-imageroundwidth="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

總結(jié)

以上是生活随笔為你收集整理的uni-app小程序，实现根据中文首字母排序功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。