效果

说明

需要先在高德地图申请key，快速通道
[IndexedList 索引列表]这是下载的插件快速通道
[自动化索引列表]文章快速通道

代码

template

<view class="content_box"><!-- stepsList步骤条样式显示省市区 --><stepsList :datalist="datalist" :addressindex="addressindex" @click="ckSteps"></stepsList><view style="height: 350px;position: relative;"><uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list></view>
</view>

js

methods: {getcity(adcode) {let subdistrict = this.addressindex + 1;uni.request({url: 'https://restapi.amap.com/v3/config/district',data: {keywords: adcode,subdistrict: subdistrict,key: '高德地图用户的key'},success: res => {this.list = buildTextData(res.data.districts[0].districts);}});},bindClick(e) {console.log('点击item，返回数据' + JSON.stringify(e));// code存起来let codelist = this.codelist;codelist[this.addressindex] = e.code;this.codelist = codelist;this.datalist[this.addressindex] = e.item.name;// this.addressindex ==4 ? '': this.addressindex = this.addressindex + 1if (this.addressindex == 3) {console.log('选择地址', this.datalist);console.log('地址code', this.codelist);this.choose_show = false;} else {this.addressindex = this.addressindex + 1;this.getcity(e.code);}},ckSteps(n) {// 点击地址-》省市区let data_frist = ['请选择省', '请选择市', '请选择区', '请选择街道'];this.addressindex = n;let code = '';if (n == 0) {this.datalist = data_frist;this.codelist = [];code = '';} else {let datalist = this.datalist;datalist = datalist.splice(0, n);data_frist = data_frist.splice(n, data_frist.length);datalist = datalist.concat(data_frist);this.datalist = datalist;code = this.codelist[n - 1];}this.getcity(code);}}

调用

onLoad() {this.getcity('')
},

uniapp省市区街道四级级联动选择器相关推荐

html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
vue2移动端仿淘宝APP省市区街道四级地区选择器
前言 : 这个选择器的的界面有使用到vant作为样式的编写,之后有时间会写一个完全无任何依赖的出来,作为以后组件库的使用. 最近写一个商城项目时,地区选择器上设计图上是这样的总觉得好眼熟,但是又想不 ...
2021年省市区街道居委五级联动
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.逐级拉取二.调用数据同步接口 1.直接调用循环调取 2.对应表结构总结代码地址前言提示:这里可以添加本文 ...
vue elementUI 高德地图接口实现省市区街道四级联动
先看看效果图: 这里我使用的是直接get方式去高德去接口数据的方式,所以不需要在vue安装任何东西. 这里不要使用代理跨域,直接把高德地址放上去就行了,key是高德注册的key,后面的参数是用来传递s ...
智能识别收货地址（支持vue）/省市区街道四级联动
一.智能识别收货地址解决方案一:smartParsePro 源代码地址: https://github.com/wzc570738205/smartParsePro 使用方法1,在线API: 特别提 ...
微信小程序中如何实现省市区街道四级地址级联选择
大家好,我是雄雄. 前言微信小程序中支持省市区地址级联吗? 微信小程序中的地址级联最多支持到几级? 今天,我们就来看看,微信小程序中的地址级联的使用,以及一些坑-希望大家看完之后能避免踩坑啊. 省市 ...
全国地址省市区街道，4级联动查询
在公司做项目时,遇到了这么一个需求:需要省市区街道地址下拉,所以研究了一下 1.首先,实体类设计省表市表区表街道表 2.service层 /*** 获取省的数据* @return*/publi ...
uniapp 省市区三级联动
uniapp 省市区三级联动需求:小程序省市区三级联动,可在子节点存在时选择父节点(也就是说可以在区存在时选择市),同时满足可以根据不同用户权限展示出两级联动(列表无省),一级联动(列表无省市只有区 ...
选择收货地址，省市区街道联动
使用情景是填写快递邮寄到的地址信息,介绍实现此功能的方法之一,实现之后效果如图所示: 选择省市区,逐个选择逐个出现,如果选择的是北京.天津等直辖市,就不是四级联动是三级联动. 选择镇或街道. 实现步骤 ...

uniapp省市区街道四级级联动选择器

省市区街道四级级联动选择器

效果

说明

代码

更多代码在这

uniapp省市区街道四级级联动选择器相关推荐

最新文章

热门文章