설명하다:
백엔드 호출 인터페이스에서 모든 핫 이름을 가져오고 이 이름의 첫 글자를 정렬한 후 해당 문자 아래에 배치합니다. 최종 렌더링은 다음과 같습니다.
구현 프로세스
**전체 구현 아이디어는 다음과 같습니다. **먼저 인터페이스를 호출하여 모든 직원의 이름과 기타 정보를 얻고, 얻은 중국어 이름을 병음으로 변환합니다. "Zhang San"을 "ZS"로) 여기서는 첫 글자만 필요합니다. js의 가로채기 기능을 사용하여 실현할 수 있는 이름의 첫 번째 단어 여기서는 중국어를 사용하여 병음하여 js-pinyin페이지에 변환된 콘텐츠를 렌더링합니다. 1. 패키지
다운로드 2. main.js에 js-pinyin을 도입합니다. 3. methdos 함수에서 인터페이스를 호출하여 이름 데이터를 가져옵니다. 여기서 res는 가져온 직원 정보입니다. 반환된 데이터 구조는 아래 그림과 같습니다.js-pinyin
npm install js-pinyin
import pinyin from 'js-pinyin'
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) 컴포넌트에서 사용할 때 기본값을 내보내기 전에 먼저 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(){
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-index-bar、van-index-anchovan-weapp 구성 요소 라이브러리의 구성 요소를 사용합니다.
<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