Uso simple de Vant IndexBar en applet

Este artículo fue proporcionado por el amigo de Lao Wang, Chao Chao. Se ha actualizado a la cuenta pública original de WeChat "Software Lao Wang" por la mañana. ¡Los amigos pueden prestar atención a la cuenta pública original de Lao Wang!

Mire la imagen final, principalmente una representación A - Zde 通讯录. Del mismo modo, si lo que quieres hacer es una lista de ciudades, también puedes consultarla.
Uso simple de Vant IndexBar en applet

Aquí está el documento oficial de Vant IndexBar para su conveniencia.

La libreta de direcciones anterior era solo una lista, los nombres no estaban en orden y no era conveniente encontrarla. Acabo de ver este componente en la Vantbiblioteca de componentes IndexBar, así que lo reemplacé inmediatamente. En general, existen los siguientes dos pasos.

1. Formatee los datos

Al principio, los datos que me dio el backend eran así, y solo quería una lista de nombres.

[
  {
    "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"
  }
]

Así que primero tenemos que volver a la lista de empleados employeeListpara hacer el siguiente trato.

    let employeeNameList = [];
    for (let k in employeeList) {
        employeeNameList.push(employeeList[k].employeeName)
    }

La tabla de nombres de empleados procesados se employeeNameListve así

[
  "安琪拉",
  "吕布",
  "赵云"
]

Debido a que los nombres de las personas son caracteres chinos y no pueden ' A ' , ' B ' .....' X ' , ' Y ' , ' Z 'coincidir con ellos, debe utilizar una biblioteca de terceros para convertir los caracteres chinos en pinyin y luego extraer la primera letra para completar la coincidencia. Yo uso wl-piny en esta biblioteca.
Importarlo antes de usarlo

import pinyin from "wl-pinyin"

Defina una matriz alfabética AlphabetListpara almacenar 26 letras mayúsculas.

AlphabetList : ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]

Datos de costura

      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)
          }
        })
      })

El formato de datos final es así

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

2. Introducir componentes en el diseño

<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>

Son las 02:55:02 del 19 de septiembre de 2020, buenas noches.

Para obtener más información, preste atención a la cuenta oficial: "Software King" , comparta tecnología de TI y productos secos relacionados, responda a las palabras clave para obtener los productos secos correspondientes, java , envíe 10 "Trucos de artes marciales" imprescindibles; imágenes , envíe más de 1 millón de copias para uso comercial Imágenes de alta definición, entrevista , enviar preguntas de entrevista en Java con un salario mensual de "20k" justo después de la graduación. Las actualizaciones de seguimiento, como " prueba suave ", " herramientas ", etc., ya se están resolviendo.
Uso simple de Vant IndexBar en applet