这篇文章是老王的朋友超超提供的,上午已经更新到原创微信公众号「软件老王」,欢迎各位朋友关注老王的原创公号!
先看下最终效果图,主要是渲染一个A - Z
的 通讯录
。同样的,如果你要做的是城市列表,也可以参考一下。
这边是 Vant IndexBar 官方文档 方便你查阅。
之前的通讯录只是一个列表,名字没有顺序,查找起来不太方便,正好看到
Vant
组件库里有IndexBar
这个组件,所以就立马换掉了,总的来说有以下两个步骤。
1. 格式化数据
一开始,后台给我的数据是这样的,而我只想要一个包含名字的列表就够了。
[
{
"createdAt": "2020-08-27 18:06:53",
"department": "总经理办公室",
"employeeName": "安琪拉",
"objectId": "4a3eed5344",
"phoneNumber": "18012251502",
"serialNumber": "1",
"staffPosition": "总经理",
"updatedAt": "2020-08-27 18:06:53",
"username": "18012251502"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "生产部",
"employeeName": "吕布",
"objectId": "7236fed315",
"phoneNumber": "18257122100",
"serialNumber": "41",
"staffPosition": "装配",
"updatedAt": "2020-08-27 18:06:53",
"username": "18257122100"
},
{
"createdAt": "2020-08-27 18:06:53",
"department": "技术部",
"employeeName": "赵云",
"objectId": "6a1daa9a80",
"phoneNumber": "15852855556",
"serialNumber": "42",
"staffPosition": "管理员",
"updatedAt": "2020-08-27 18:07:26",
"username": "15852855556"
}
]
所以要先把返回的员工列表employeeList
做下处理
let employeeNameList = [];
for (let k in employeeList) {
employeeNameList.push(employeeList[k].employeeName)
}
处理之后的员工姓名表employeeNameList
是这样的
[
"安琪拉",
"吕布",
"赵云"
]
因为人名是汉字,无法与' A ' , ' B ' .....' X ' , ' Y ' , ' Z '
匹配,所以需要用第三方库将汉字转换成拼音,再提取首字母去完成匹配。我这边用的是 wl-pinyin 这个库。
使用之前先导入一下
import pinyin from "wl-pinyin"
定义一个字母表数组AlphabetList
,存放26个大写字母。
AlphabetList : ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
拼接数据
let firstName = {};
this.data.AlphabetList.forEach((item) => {
firstName[item] = [];
employeeNameList.forEach((el) => {
/** 主要在这一句,el代表每个名字如 “安琪拉” ,
pinyin.getFirstLetter(el) 取的是名字的首字母 “AQL” ,
.substring(0, 1) 就是只取第一个字符 ‘A’ **/
let first = pinyin.getFirstLetter(el).substring(0, 1);
if (first == item) {
firstName[item].push(el)
}
})
})
最后得到的数据格式是这样的
{
"A": [
"安琪拉"
],
"B": [
"百里守约","白起","不知火舞"
],
...
"H": [
"黄忠"
],
"L": [
"吕布"
],
"M": [
"马可波罗","马超"
],
...
"Z": [
"赵云","甄姬"
]
}
2. 布局中引入组件
<van-index-bar :sticky="false" >
<view wx:for="{{employeeNameList}}" wx:for-index="key" wx:for-item="value">
<!--显示 A-Z -->
<van-index-anchor :use-slot="true" index='{{key}}'>
</van-index-anchor>
<!--遍历每个字母对应的名字数组-->
<view wx:for='{{value}}' wx:for-item='employeeName' >{{employeeName}}</view>
</view>
</van-index-bar>
现在是2020年09月19日02:55:02,晚安
更多知识请关注公众号:「软件老王」,IT技术与相关干货分享,回复关键字获取对应干货,java,送必看的10本“武功秘籍”;图片,送100多万张可商用高清图片;面试,送刚毕业就能月薪“20k”的java面试题,后续不断更新中,比如“软考”、“工具”等,已经在整理中。
来源:oschina
链接:https://my.oschina.net/u/4399604/blog/4613058