A bad pen is better than a good memory.

Recently, I was working on a mobile terminal page, where I encountered a function similar to finding contacts. Let’s look at the UI picture first.

When you look at the graph, you immediately remember the address book function. Since the mobile server uses Vant framework, the indexBar of indexBar is used.

Contrib.gize. IO /vant/#/ zh-c…

The basic usage of indexBar on the official website is as follows:

<van-index-bar> <van-index-anchor index="A" /> // here is the title of each type of row <van-cell title=" text "/> // Here is the title of each type of downstream content <van-cell Title =" text "/> <van-cell title=" text" /> <van-index- Anchor index="B" /> <van-cell title=" text "/> <van-cell title=" text" /> <van-cell title=" text "/>... </van-index-bar>Copy the code

According to the example on the official website above, the style and requirements of the project cannot be met at present, so take a closer look at the content here. Is this familiar?

To learn more about van-cells, visit this link: contrib.gize. IO /vant/#/ zh-c… .

So here’s how I wrote this piece of HTML.

<van-index-bar :index-list="Object.keys(contactPersonData)"> <template v-for="(item, index) in Object.entries(contactPersonData)" > <van-index-anchor :index="item[0]" :key="index">{{ item[0] }}</van-index-anchor> <van-cell Center :title=" '${valitem.realName} [${valitem.account}]' ":label="onTitle(valItem)" v-for="(valItem, index) in item[1]" :key="index"> <template #icon> <van-image round :src="valItem.headImageSequence" /> </template> </van-cell> </template> </van-index-bar>Copy the code

Annotation explanation

Keys is an ES6 method that retrieves the key value of an Object. (2) Object.entries return an array of the key values of an Object, e.g. var obj = {foo: 'bar', baz: 42}; console.log(Object.entries(obj)); ${valitem. realName} [${valitem. account}] ' 'and ${{valitem. realName} <template #icon> because we need an image. The UI has a search box and a drop down selection. Since components are wrapped in the project, only indexBar code is shown here.Copy the code

Data returned in the background

Since the data returned in the background is not what we want, we first convert it to the data format we want:

Methods of data formatting

Let ListOfApproversData = await this.$axios.get(URL path, query); // Let AllContactPerson = {}; // Iterate over the obtained data, To make the distribution of the index value ListOfApproversData. Body. The map ((item) = > {/ / remove the current contact and converted to a call first letters capitalized let Initials = item.namePinyin[0].toUpperCase(); // Push an object if there is a current letter item in the item collection; create a new one and assign it; if (AllContactPerson[Initials]) { AllContactPerson[Initials].push(item); } else { AllContactPerson[Initials] = [item]; }}); this.contactPersonData = AllContactPerson;Copy the code

All the code

<style lang="less" module> .GetContactsWarp { width: 100%; height: 100%; position: relative; overflow: auto; .Avatar { @wh: 39px; width: @wh; height: @wh; margin-right: 5px; } } </style> <style lang="less"> .GetContactsWarp { .van-cell { .van-cell__title { & > span { font-size: 14px; font-weight: 500; color: #252631; } .van-cell__label { font-size: 12px; font-weight: 400; color: #98a9bc; } } } .van-cell::after { border-bottom: 1px solid #ddd; } .ClassLast::after { border-bottom: none; } } </style> <template> <div :class="[$style.GetContactsWarp, 'GetContactsWarp']"> <van-index-bar :index-list="Object.keys(contactPersonData)"> <template v-for="(item, index) in Object.entries(contactPersonData)" > <van-index-anchor :index="item[0]" :key="index">{{ item[0] }}</van-index-anchor> <van-cell :class="[item[1].length == index + 1 ? 'ClassLast' : ${valitem. realName} [${valitem. account}] '" :label="onTitle(valItem)" v-for="(valItem) index) in item[1]" :key="index"> <template #icon> <van-image :class="[$style.Avatar]" round :src="valItem.headImageSequence" /> </template> </van-cell> </template> </van-index-bar> </div> </template> <script> Export default {name: "GetContacts", data() {return {contactPersonData: [],// list data}; }, methods: {{onTitle (item) let STR = ` ${item. The departmentName | | 'no information'} 丨 ${item.org anizationName | | 'no unit information'} 丨 The ${item. StationName | | 'no position information'} ` return STR}, Async GetAListOfApprovers() {let ListOfApproversData = await this.$axios.get(URL path); / if/whether to obtain contact success (ListOfApproversData. Status = = 1) {/ / for all contacts the let AllContactPerson = {}; // Iterate over the obtained data, To make the distribution of the index value ListOfApproversData. Body. The map ((item) = > {/ / remove the current contact and converted to a call first letters capitalized let Initials = item.namePinyin[0].toUpperCase(); // Push an object if there is a current letter item in the item collection; create a new one and assign it; if (AllContactPerson[Initials]) { AllContactPerson[Initials].push(item); } else { AllContactPerson[Initials] = [item]; }}); this.contactPersonData = AllContactPerson; ,}}}}; </script>Copy the code

The val value of the input box should be passed to the background. The val value of the input box should be passed to the background. The only drawback is that when clicking on the right side, the inside is not fixed to the top. I will think about how to change it later.

~~ლ(‘ ◉ Sunday ‘ლ),第一次 数据 库 Please advise me where I am wrong