Vant IndexBar 在小程序中的简单使用

约定不等于承诺〃 2022-12-08 14:14 144阅读 0赞

这篇文章是老王的朋友超超提供的，上午已经更新到原创微信公众号「软件老王」，[链接][Link 1]，欢迎各位朋友关注老王的原创公号！

**先看下最终效果图，主要是渲染一个`A - Z` 的 `通讯录`。同样的，如果你要做的是城市列表，也可以参考一下。**  
![在这里插入图片描述][20200919182451785.gif_pic_center]

这边是 [Vant IndexBar 官方文档][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"]

拼接数据

最后得到的数据格式是这样的

{ 
      "A": [
        "安琪拉"
      ],
      "B": [
        "百里守约","白起","不知火舞"
      ],
      ...
      "H": [
        "黄忠"
      ],
      "L": [
        "吕布"
      ],
      "M": [
          "马可波罗","马超"
      ],
      ...
      "Z": [
        "赵云","甄姬"
      ]
    }

### 2. 布局中引入组件 ###

<van-index-bar :sticky="false" >
        <view wx:for="{ {employeeNameList}}" wx:for-index="key" wx:for-item="value">
           
            <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面试题，后续不断更新中，比如“**软考**”、“**工具**”等，已经在整理中。

![在这里插入图片描述][20200918154804757.jpg_pic_center]

[Link 1]: https://mp.weixin.qq.com/s/WswMv-kId3jJ6GhXnEQPjQ
[20200919182451785.gif_pic_center]: /images/20221123/cdfc26f4bec64562a57a9fe4437ad7db.png
[Vant IndexBar]: https://vant-contrib.gitee.io/vant-weapp/#/index-bar
[wl-pinyin]: https://www.npmjs.com/package/wl-pinyin
[20200918154804757.jpg_pic_center]: /images/20221123/1b39e7ad0a3440feb2864f0c75f58d60.png