基于uni-app实现京东收货地址

本文是用uni-app来实现收货地址城市选择，如果你想要用jquery实现相同效果可以查看我之前写的文章，用jQuery仿京东收货地址。本次的功能实现相比用jquery会比较简单，关键在于我们对缓存数据进行了特殊处理。对应最新的行政区划乡镇清单可以进入http://lbsyun.baidu.com/index.php?title=open/开发资源进行下载查阅。

第一数据结构：{"86":{"110000":"北京市"}}，我们的数据都是以对应的地区编号作为key，地区名作为value。这样的做法是方便数据遍历。

第二UI代码：分成三部分，顶部栏、数据显示栏【选择切换栏】、省市区地区数据显示栏。对已加载的数据进行缓存，于是我们采用循环来创建这些数据。逻辑代码比较清晰，具体看下方完整代码。

我们在选择的城市地区的时候，需要判断是不是已经选择过了，如果选择过了不做数据处理操作，反之移除往后选择的数据。代码实现比较简单，我就不多阐述，本案例对应的部分样式采用colorui。

完整的代码如下：

效果展示：

 

对应资源文件下载地址： https://download.csdn.net/download/qq_21726707/12002263