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

最新推荐文章于 2024-08-08 10:23:36 发布

F0_F0

最新推荐文章于 2024-08-08 10:23:36 发布

阅读量3k

点赞数

分类专栏：笔记文章标签：前端 uni-app

本文链接：https://blog.csdn.net/F0_F0/article/details/111994511

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在应用中使用省市区街道四级联动选择器，通过步骤条和下拉列表展示地理区域，包括获取城市数据、处理地址选择逻辑和调用API的关键代码片段。你需要获取高德地图API key，并利用提供的插件和组件来实现这种交互效果。

摘要由CSDN通过智能技术生成

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

效果

效果

在这里插入图片描述

说明

需要先在高德地图申请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 + 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);
        }
    }