Sample code for urban list implemented by Vant Indexbar

There is a demand in development is a list of choosing a city. I look at the three-level linkage seems to be not particularly convenient or made into a whole page. You can pick it up by navigation.

I said that I am on the code

I use the INDEXBAR component in this UI framework. In fact, this component has already taken the need. We only need to handle the data.

First need to introduce This is not described in the indexbar component.

when you click the index bar, you will automatically jump to the corresponding indexanchor anchor position

       ...       this is VANT official document indexbar's basic usage document 
Indexanchor default is AZ Here we don’t have to customize


Cycle part My idea is the first in each city name Letter sorting


and then take a look at my data

{“ID”: 101, “Name”: “Beijing”, “PID”: 1, “CODE”: 0}, {“ID”: 10101, “Name”: “Tianjin”, “PID”: 10001, “Code”: 0}, {“ID”: 20101, “Name”: ” Shijiazhuang City “,” PID “: 20001,” Code “: 130100}

Because the previous data is very chaotic, I let the background old brother rewrite a city only The list of class cities is very good.

The first step first removes the name of the city
   A simple loop is OK 


let citynamelist = [] for (Let P in cityList) {citynamelist.push (cityList [p] .name)}


Step by step is a key step directly take the first letter of the array and sorted by AZ
 here is used herein PINYIN with it to take Chinese first letter  First installation  
NPM Install JS-Pinyin




) introduced in mian.js

   

   Let Pinyin = Require ('JS-Pinyin') Pinyin.SetOptions ({CHECKPOLYPHONE: FALSE, Charcase: 0}) 
Then you can use

Direct a cycle to achieve our effect
 Let firstname = {}; this.firstpin.Foreach (item) => {firstname [item] = [] CityNameList.fOreach ((EL) => {let first = pinyin.getfullchars (el) .substring (0, 1); if (first == item) {firstname [item] .push (el)}})}   
The firstpin here is an array defined in Data to store AZ

firstpin: [“a”, “B”, “C”, “D”, “E”, “F”, “G”, “H”, “J”, “K”, “L”, “M”, “N”, “P “,” Q “,” R “,” S “,” T “,” W “,” X “,” Y “,” Z “],
   Then my firstname's format is such a 

FIRNAME: {A: [“Alashan League”, “Anshan”]}

  Finally, it is possible to write a loop in the InderBar component  

{{index}}

   
The above is all the content of this article, I hope to help everyone’s learning, I hope everyone supports Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment