城市选择数据渲染

要求：

点击右边索引栏时，会自动跳转到对应的索引位置

大体解决方案：

利用vantUI框架引入indexBar索引栏

利用axios拿到后台城市数据，定义两个数据，一个为右边索引栏的字母数组（大写），一个为索引和城市的对象数组

先将右侧索引栏字母定义出来，遍历数据的拼音，取出首字母，排序，转大写

再定义第二个数组，做一个双for循环，先循环索引的字母，将字母以对象的形式插入到空数组中，再循环数据中拼音的首字母大写，若找出数据中的首字母大写与索引的字母一样的话就进行插入，以对象的形式插入到刚刚的数组中，最后用v-for遍历将数据渲染到桌面上

详细城市渲染步骤：

<template>
  <div>
    <!-- 循环右侧索引栏字母 -->
    <van-index-bar :index-list="indexList">
      <!-- 建立一个空div进行循环，给索引和城市添加数据，渲染页面 -->
      <div v-for="(item,index) in cityIndex" :key="index">
        <van-index-anchor :index="item.letter" />
        <van-cell :title="item.name" />
      </div>
    </van-index-bar>
  </div>
</template>
<script>
import Vue from 'vue';
import instance1 from '@/utils/http'
import { IndexBar, IndexAnchor,Cell } from 'vant';
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
export default {
  data () {
    return {
      cityIndex:[],   //模拟：[{letter : A} , {name : "xxx"} , {name : "xxx"} , {letter : B} , {name : "xxx"} , {name : "xxx"} , {name : "xxx"}]
      indexList: [],    //右侧索引栏（大写字母）
    }
  },
  methods: {
      cities(data){
        //先定义右侧索引栏
        var a = data.map(item=>Array.from(item.pinyin).splice(0,1))   //遍历数据的拼音，截取出首字母
        var UpperCase = Array.from(new Set(Array.from(a.toString()))).map(item=>item.toUpperCase())   //每个字母变为字符串，转一个总数组，去重，转数组，遍历转为大写字母
        this.indexList = UpperCase.sort().slice(1)    //排序，取出从第二个往后的字母
        //定义模拟的城市对象
        let cityarr = []  
        for(var i = 0; i < this.indexList.length; i++){   //循环字母
          cityarr.push({letter:this.indexList[i]})    //先将字母以对象形式插入到数组中
          for(var j = 0; j < data.length; j++){   //循环所有的数据
            if(this.indexList[i] === data[j].pinyin.slice(0,1).toUpperCase()){    //找出索引字母与循环所有数据的首字母一样
              cityarr.push({      //将城市名字以对象的形式插入数组中
                name:data[j].name
              })
            }
          }
        }
        this.cityIndex = cityarr
      },
  },
  created(){
    instance1.get("/gateway?k=353128",{
      headers:{
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res=>{    //写一个方法，将请求的数据给方法用
      this.cities(res.data.data.cities)
    })
  }
}

</script>

<style lang="scss" scoped>

</style>