Vant IndexBar 在小程式中的簡單使用

阿新 • • 發佈：2020-09-19

這篇文章是老王的朋友超超提供的，上午已經更新到原創微信公眾號「軟體老王」，連結，歡迎各位朋友關注老王的原創公號！

先看下最終效果圖，主要是渲染一個A - Z 的 通訊錄。同樣的，如果你要做的是城市列表，也可以參考一下。

之前的通訊錄只是一個列表，名字沒有順序，查詢起來不太方便，正好看到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>