This is the 27th day of my participation in the August More Text Challenge

Look at the

Such components are commonly seen in service or commercial projects, such as Meituan, Ele. me, Qunar and other projects. The services provided by such projects require direct users’ current location.

So, in addition to the basic authorization location, there are two types of services that are required: a city selector and a map.

Maps are usually made with an existing map project in the market, after all, it’s too cool to make one yourself.

And the city selector, the general city is certainly looking for ready-made, mainly rendering this piece can be used in the component library, can also do their own.

This article is about their own city selector.

Key points: Structure

As can be seen from the above renderings, there are mainly two categories (the classification of mainland China and Hong Kong, Macao and Taiwan is required by the company’s internal projects, which is not mentioned here).

Mainly popular cities, and all cities in alphabetical order.

The first step, of course, is to find a JSON list of cities, here you can find your own oh, write down the JSON structure

{hot: [{" cityName ":" Beijing ", "pinYin" : "Beijing", "x" : "bj", "code" : 'PEK'}], the citys: / / same as above {}}Copy the code

Once you have interfaces for all cities, you can render the list

<! -- Hot Cities -->
<view v-if="searchValue == '' && tabCur === 0">
  <view class="letter-header" style="font-size: 30rpx; height: 70upx;">hot</view>
  <view class="grid col-4 text-center padding-right">
    <view class="padding-tb" v-for="(city, i) in hotCities" :key="i" @click="back_city(city, 1)">
      <text>{{ city.cityName }}</text>
    </view>
  </view>
</view>
<! -- Cities in alphabetical order -->
<view v-if="searchValue == ''" v-for="(item, index) in list[tabCur]" :id="getId(index)" :key="index">
  <view class="letter-header">{{ getId(index) }}</view>
  <view class="city-view" v-for="(city, i) in item" :key="i" @click="back_city(city, 1)">
    <text class="city">
      <! -- <span v-if="tabCur == 1" style="margin-right:10rpx;" >{{ city.py }}</span> -->
      {{ city.cityName }}
    </text>
  </view>
</view>
Copy the code
import Citys from './city.js';
computed: {
  // Hot cities in China
  hotCities() {
    return Citys.hotCities;
  },
  citys() {
    returnCitys.cities; }},onMounted(){
  // Get the program letters of city.js
  let mu = ['a'.'b'.'c'.'d'.'e'.'f'.'g'.'h'.'j'.'k'.'l'.'m'.'n'.'p'.'q'.'r'.'s'.'t'.'w'.'x'.'y'.'z'];
  let tmp = [];
  let tmp1 = [];
  // The Chinese urban data source originally handles this.citys
  for (let i in mu) {
    let item = mu[i];
    for (let j in this.citys) {
      let py = this.citys[j].py;
      if (py.substring(0.1) == item) {
        if (JSON.stringify(tmp).indexOf(JSON.stringify(item)) == -1) {
          this.list[0][i] = [this.citys[j]];
          tmp.push(item);
          this.letter[0].push(item.toUpperCase());
        } else {
          this.list[0][i].push(this.citys[j]);
        }
      }
    }
  }
}
Copy the code