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

隐身守侯 提交于 2020-09-27 23:55:41

这篇文章是老王的朋友超超提供的,上午已经更新到原创微信公众号「软件老王」,欢迎各位朋友关注老王的原创公号!

先看下最终效果图,主要是渲染一个A - Z通讯录。同样的,如果你要做的是城市列表,也可以参考一下。
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"]

拼接数据

      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面试题,后续不断更新中,比如“软考”、“工具”等,已经在整理中。
Vant IndexBar 在小程序中的简单使用

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!