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

效果

说明

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

代码

template

<view class="content_box">
	
	<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 + 1
            if (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('')
},

更多代码在这

项目示例