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

先看下最終效果圖，主要是渲染一個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，晚安

END/往期推薦:

1.springcloud從入門到精通

2.springboot從入門到精通

3.java入門到精通

4.中間件與數據庫

5.其餘

原創不易，若是以爲有點用的話，請絕不留情地素質三連吧，分享、點贊、在看，我不挑，由於這將是我寫做更多優質文章的最強動力。

本文分享自微信公衆號 - 軟件老王（ruanjianlaowang_pub）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。