小程序 位置选择组件开发，后配cityList.json 文件

概述：

基于用户选择地理位置，来获取相应位置的服务推送  图片上方有city的json文件，请自行下载

调研：

看了 dcloud的插件 他们是基于百度 腾讯地图开发 重点是付费 5w/年 公司没有那个实力，就自己开发了

这里我用了vant 组件库的IndexBar  链接在这里

开发步骤：

1.引入vant 组件，不再过多强调

2.在页面里引入json文件

	var cityList = require('./utils/city/city.json')//你的json文件路径

3.开始循环

<van-index-bar :index-list="indexList">
			<view v-for="(item,index) in cityAllList" :key="index">
				<van-index-anchor :index="item.initial" />
				<van-cell v-for="(v,k) in item.list" :title="v.name" :key="k" />
			</view>
		</van-index-bar>





<script>
	var cityList = require('../utils/city/city.json')
	export default {
		data() {
			return {
				cityAllList: [],
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
			}
		},
		onLoad() {
			this.cityAllList = cityList.city //这里最好是放入页面的data里 不然有时候会报错
			
		},
		methods: {
			
		}
	}
</script>

跑起来会发现一个问题，就是点击后边的  index索引  显示内容展示的是对的  但是index的选中样式是不对的

造成这一现象 原因是 city的 索引首字母 并不是全部的 A-Z 26个字母，这里我们打印一下

   只有这几个

所以  indexList需要替换成  需要的字母

就可以啦！！！

总结  现在很多用的都是三级联动的地区选择  那个更灵活方便一些