uniapp 三级联动选择省市区

最新推荐文章于 2024-08-30 10:13:17 发布
最新推荐文章于 2024-08-30 10:13:17 发布
阅读量95 收藏
点赞数 1
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41173973/article/details/141674124
版权 
// 接口数据格式：
{
	"code": 1000,
	"msg": "成功",
	"data": {
		"list": [{
			"citycode": "",
			"adcode": "410000",
			"name": "河南省",
			"center": "113.753094,34.767052",
			"level": "province",
			"districts": [{
				"citycode": "0379",
				"adcode": "410300",
				"name": "洛阳市",
				"center": "112.453895,34.619702",
				"level": "city",
				"districts": [{
					"citycode": "0379",
					"adcode": "410323",
					"name": "新安县",
					"center": "112.13246,34.728909",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0379",
					"adcode": "410327",
					"name": "宜阳县",
					"center": "112.179187,34.51462",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0379",
					"adcode": "410328",
					"name": "洛宁县",
					"center": "111.652958,34.389371",
					"level": "district",
					"districts": []
				}]
			}, {
				"citycode": "0398",
				"adcode": "411200",
				"name": "三门峡市",
				"center": "111.200482,34.773196",
				"level": "city",
				"districts": [{
					"citycode": "0398",
					"adcode": "411202",
					"name": "湖滨区",
					"center": "111.188552,34.771296",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0398",
					"adcode": "411221",
					"name": "渑池县",
					"center": "111.761753,34.767937",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0398",
					"adcode": "411281",
					"name": "义马市",
					"center": "111.874726,34.747563",
					"level": "district",
					"districts": []
				}]
			}, {
				"citycode": "0374",
				"adcode": "411000",
				"name": "许昌市",
				"center": "113.852004,34.03732",
				"level": "city",
				"districts": [{
					"citycode": "0374",
					"adcode": "411003",
					"name": "建安区",
					"center": "113.822869,34.124729",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0374",
					"adcode": "411002",
					"name": "魏都区",
					"center": "113.830826,34.047189",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0374",
					"adcode": "411024",
					"name": "鄢陵县",
					"center": "114.177329,34.102985",
					"level": "district",
					"districts": []
				}]
			}]
		}, {
			"citycode": "",
			"adcode": "440000",
			"name": "广东省",
			"center": "113.266887,23.133306",
			"level": "province",
			"districts": [{
				"citycode": "0757",
				"adcode": "440600",
				"name": "佛山市",
				"center": "113.121586,23.021351",
				"level": "city",
				"districts": [{
					"citycode": "0757",
					"adcode": "440608",
					"name": "高明区",
					"center": "112.892573,22.900047",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0757",
					"adcode": "440607",
					"name": "三水区",
					"center": "112.897271,23.156675",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0757",
					"adcode": "440605",
					"name": "南海区",
					"center": "113.143246,23.028875",
					"level": "district",
					"districts": []
				}]
			}, {
				"citycode": "0758",
				"adcode": "441200",
				"name": "肇庆市",
				"center": "112.465245,23.047747",
				"level": "city",
				"districts": [{
					"citycode": "0758",
					"adcode": "441225",
					"name": "封开县",
					"center": "111.512177,23.423928",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0758",
					"adcode": "441224",
					"name": "怀集县",
					"center": "112.166908,23.920806",
					"level": "district",
					"districts": []
				}, {
					"citycode": "0758",
					"adcode": "441223",
					"name": "广宁县",
					"center": "112.440694,23.634808",
					"level": "district",
					"districts": []
				}]
			}]
		},
	}
}
在components 文件夹下新建cus-city-picker目录，新建cus-city-picker.vue页面
<template>
	<view class="pupop">
		<view class="popup-box" :animation="animationData">
			<view class="pupop-btn">
				<view @tap="onCancel">取消</view>
				<view @tap="onConfirm" style="color: #2979ff;">确定</view>
			</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="onBindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column v-if="column == 3">
					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view @tap="onClose" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: [],
				provinceList: [],
				cityList: [],
				areaList: [],
				indicatorStyle: `height: 50px;`,
				provinceIndex: 0,
				cityIndex: 0,
				areaIndex: 0,
				animationData: {}
			}
		},
		props: {
			addressList: {
				type: Array,
				default: []
			},
			column: {
				type: Number,
				default: 3
			},
			defaultValue: {
				default: () => ''
			},
			visible: {
				type: Boolean,
				default: () => false
			},
			maskCloseAble: {
				type: Boolean,
				default: () => true
			},
		},
		watch: {
			addressList(val) {
				this.init()
			},
			visible(val) {
				this.onChangeActive()
			},
		},
		methods: {
			init() {
				var provinceList = []
				this.addressList.filter(item => {
					provinceList.push({
						adcode: item.adcode,
						name: item.name
					})
				})
				this.provinceList = [...provinceList]
				if (!this.defaultValue) {
					this.cityList = this.addressList[0].districts
					this.areaList = this.addressList[0].districts[0].districts
				} else {
					if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
						var province = this.defaultValue[0]
						var city = this.defaultValue[1]
						this.provinceIndex = this.addressList.findIndex(obj => {
							return obj.name == province
						})
						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0;

						this.cityList = this.addressList[this.provinceIndex].districts
						this.cityIndex = this.cityList.findIndex(obj => {
							return obj.name == city
						})
						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0;
						
						this.areaList = this.cityList[this.cityIndex].districts
						if (this.defaultValue.length > 2) {
							this.areaIndex = this.areaList.findIndex(obj => {
								return obj.name == this.defaultValue[2]
							})
						}
						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0;
						
						this.$nextTick(() => {
							if (this.column == 3) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this
									.areaIndex
								]))
							} else if (this.column == 2) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
							}
						})
					} else if (/^\d{6}$/.test(this.defaultValue)) {
						var province = this.defaultValue.substr(0, 2)
						var city = this.defaultValue.substr(0, 4);
						this.provinceIndex = this.addressList.findIndex(obj => {
							return obj.adcode == province
						})
						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0;
						
						this.cityList = this.addressList[this.provinceIndex].districts
						this.cityIndex = this.cityList.findIndex(obj => {
							return obj.adcode == city
						})
						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0;
						
						this.areaList = this.cityList[this.cityIndex].districts
						this.areaIndex = this.areaList.findIndex(obj => {
							return obj.adcode == this.defaultValue
						})
						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0;
						
						this.$nextTick(() => {
							if (this.column == 3) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this
									.areaIndex
								]))
							} else if (this.column == 2) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
							}
						})
					} else {
						uni.showToast({
							title: '地区编码格式不正确',
							icon: 'none'
						}) 
					}
				}
				this.onChangeActive()
			},
			onConfirm() {
				if (this.column == 3) {
					this.$emit('confirm', {
						adcode: this.addressList[this.provinceIndex].districts[this.cityIndex].districts[this
								.areaIndex]
							.adcode,
						name: this.addressList[this.provinceIndex].name + this.addressList[this.provinceIndex]
							.districts[this
								.cityIndex].name + this.addressList[this.provinceIndex].districts[this.cityIndex]
							.districts[this.areaIndex].name,
						provinceName: this.addressList[this.provinceIndex].name,
						cityName: this.addressList[this.provinceIndex].districts[this.cityIndex].name,
						areaName: this.addressList[this.provinceIndex].districts[this.cityIndex].districts[this
							.areaIndex].name
					})
				} else if (this.column == 2) {
					this.$emit('confirm', {
						adcode: this.addressList[this.provinceIndex].districts[this.cityIndex].districts[this
								.areaIndex]
							.adcode.substring(0, 4) + '00',
						name: this.addressList[this.provinceIndex].name + this.addressList[this.provinceIndex]
							.districts[this
								.cityIndex].name,
						provinceName: this.addressList[this.provinceIndex].name,
						cityName: this.addressList[this.provinceIndex].districts[this.cityIndex].name
					})
				} else {
					uni.showToast({
						title: '目前column只能传2和3',
						icon: 'none'
					})
				}
			},
			onCancel() {
				this.$emit('cancel')
			},
			// 动画
			onChangeActive() {
				var active = '-315px'
				if (this.visible) {
					active = 0
				}
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'linear'
				})
				animation.bottom(active).step()
				this.animationData = animation.export()
			},
			onBindChange(e) {
				e.detail.value[0] = e.detail.value[0] || 0
				e.detail.value[1] = e.detail.value[1] || 0
				e.detail.value[2] = e.detail.value[2] || 0
				if (e.detail.value[0] != this.provinceIndex) {
					this.onProvinceChange(e.detail.value[0])
				} else if (e.detail.value[1] != this.cityIndex) {
					this.onCityChange(e.detail.value[1])
				} else if (e.detail.value[2] != this.areaIndex) {
					this.onAreaChange(e.detail.value[2])
				}
			},
			// 监听第一列变化
			onProvinceChange(e) {
				this.provinceIndex = e
				this.cityIndex = 0
				this.areaIndex = 0
				this.value = [...[e, 0, 0]]
				this.cityList = this.addressList[e].districts
				this.areaList = this.addressList[e].districts[0].districts
			},
			// 监听第二列变化
			onCityChange(e) {
				this.cityIndex = e
				this.areaIndex = 0
				this.value = [...[this.provinceIndex, e, 0]]
				this.cityList = this.addressList[this.provinceIndex].districts
				this.areaList = this.addressList[this.provinceIndex].districts[e].districts
			},
			// 监听第三列变化
			onAreaChange(e) {
				this.areaIndex = e
			},
			// 点击模态框
			onClose() {
				if (this.maskCloseAble) {
					this.onCancel()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pupop {
		.popup-box {
			position: fixed;
			left: 0;
			bottom: -315px;
			z-index: 99999;
			background: #fff;
			padding-bottom: 50px;

			.pupop-btn {
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				justify-content: space-between;
			}
		}

		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: rgba(0, 0, 0, .5);
		}

		.pupop-models {
			display: none;
		}

		.picker-view {
			width: 750rpx;
			height: 225px;
			margin-top: 20rpx;
		}

		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
		}
	}
</style>
在index.vue页面调用组件
<template>
	<view class="w-100">
		<view class="w-100 cus-flex-start-j">
			<view style="width: 150rpx;font-size: 32rpx;font-weight: bold;">所在地区</view>
			<view @click="onChooseCity">
				<u-input v-model="district" border="none" placeholder="请选择" readonly customStyle="margin-top:0rpx;"
					suffixIcon="arrow-down" suffixIconStyle="color: #D7D7D7"></u-input>
			</view>
		</view>
		<!-- 选择所在地区 -->
		<cityPicker :column="3" :default-value="cityInfo.defaultValue" :addressList='addressList'
			:mask-close-able="true" :visible="cityInfo.visible" @confirm="onConfirmCity" @cancel="onCancelCity">
		</cityPicker>
	</view>
</template>

<script>
	import api from "@/utils/api.js";
	import cityPicker from '@/subpackages/components/cus-city-picker-http/cus-city-picker-http'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				addressList: [],
				district: '', //地区：省,市,区(用,分割)
				cityInfo: {
					visible: false,
					defaultValue: '',
				},
			}
		},
		created() {
			this.getCitys();
		},
		methods: {
			//获取城市列表
			getCitys() {
				api.getCitys({
					data: {
						type: 'district'
					}
				}).then(res => {
					this.addressList = res.data.list
				});
			},
			//选择城市
			onChooseCity() {
				this.cityInfo.visible = true
			},
			onConfirmCity(val) {
				this.district = val.provinceName + ',' + val.cityName + ',' + val.areaName;
				this.cityInfo.visible = false;
			},
			onCancelCity() {
				this.cityInfo.visible = false;
				if (this.district == '') {
					console.log("请选择所在地区")
				}
			},
		},
	}
</script>

阿宇爱吃鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中实现省市区三级选择加载
前端-尔嵘
06-01 923
这个实现的话兼容性还是不错的，可以用于混合app,具体的话你还需要自己修改，数据不是一次性全部获取的，加载速度也是比较快的，数据都来源于后端提供的接口。你还可以改写一下弄成弹窗一次性弹出的那种，更加直观！首先需要将省、市、区的数据分别请求到本地（或者服务器），然后将其存储为数组对象。我的使用uni-app自带的picker组件实现三级联动。
uniapp使用uview组件实现省市区三级联动
06-29
这样，当用户在省市区选择器中切换时，相应的下拉菜单会自动更新，实现联动效果。 在实际项目中，可能需要根据实际情况调整数据来源，例如从远程API获取数据。此外，为了提高用户体验，可以添加加载提示和错误处理...
uniapp省市区三级联动
weixin_41201496的博客
11-05 1298
uniapp省市区三级联动
uniapp picker 3级联动 请求省市区
weixin_49399187的博客
04-20 349
uniapp picker 3级联动 请求省市区。
uniapp省市区3级联动组件
记录本人工作中遇到的问题、经验总结以及分享。
06-30 1681
省市区json数据，请返回顶部下载。
uniapp使用picker组件实现省市区选择三级联动
m0_73205643的博客
08-06 203
【代码】uniapp使用picker组件实现省市区选择三级联动。
关于uniapp省市区三级联动选择器
Lyn1421的博客
04-28 1428
其次在defaultRegion的监听里把那个region.length==6删掉，把判断条件判断if(region)；2:选择省的时候，市，区自动选择到第1位。选择市时，区自动选到第1位;1.回显时regionId超过六位数时回显失败。
uniapp 省市区三级联动
_NIXIAKF的博客
05-06 1950
先看效果图 1.首先 创建一个address.js文件 用来存放省市区的数据 这里给大家提供一个地址 https://github.com/kaixinf/provinceData/commit/b7b181bd0990796f600a1beeb42c9491e57611ae 注意：数据创建完成之后 要抛出哦 数据新建完成之后 在App.vue里边加上如下代码 一定要加！！ 接着就是封装一个组件 创建一个组件文件 2.组件的html部分 <template>
Uniapp省市区三级联动实现
significant_的博客
02-20 2130
uniapp 省市区三级联动
uniapp取后台数据实现省市区三级联动
u012673806的博客
11-28 4049
实现这个功能，我们先看官方文档，的picker-view组件，这个案例是再这个组件的基础上做修改而来，还有看一下官方的uni-popup组件，直接操作 1.先下载好popup弹出层插件，下载地址：uni-popup 弹出层 - DCloud 插件市场 下载这个两个，为什么呢，我说明一下，直接下载插件ZIP，里面有组件缺少，不完整，导致其他组件不能使用，这个插件是一整体使用，不能拆分使用，下载好插件ZIP打开是这样的 我们直接打开components文件夹，把里面的所有东西拷贝到你项目的com.
uni-app实现省市区三级联动的js文件
10-22
本文件是uni-app实现省市区三级联动中的data.js文件，详情见博客：https://whhtjl.blog.csdn.net/article/details/109216246
微信小程序 省市区三级联动选择
10-14
微信小程序的省市区三级联动选择是一个常见的功能，用于在用户输入地址时提供便捷的选择体验。这一功能涉及到小程序的UI设计、数据处理以及事件交互等多个方面。以下是对这一知识点的详细阐述： 1. **UI组件使用**...
uniapp、小程序 省市区选择,拉起弹窗选择
07-29
本篇将详细介绍如何在`uniapp`中实现省市区选择功能，并通过弹窗进行展示。 首先，`uniapp`提供了一个叫做`uni-popup`的组件，它可以用来创建各种弹窗效果。在这个场景中，我们需要一个弹窗来显示省市区的选择列表...
超好用的省市区三级联动+常用城市设置
04-25
在IT领域，尤其是在前端开发中，"省市区三级联动"是一种常见的交互设计，它用于用户在填写地址时方便快捷地选择所在的省份、城市和区县。这种设计通常涉及到JavaScript、CSS和HTML等技术的结合使用，以实现下拉菜单...
【uniapp 解决h5 uni.saveFile 不生效】2种方法解决
最新发布
weixin_49066399的博客
08-30 121
用uni.saveFile h5报错。第二种 可以引用js第三方库来进行保存。先安装 file-saver。查看文档发现不支持h5。
基于springboot+vue+uniapp的物流管理系统小程序
老卓爱爪哇 的博客
08-27 1067
在此基础上，结合现有物流管理体系的特点，运用新技术，构建了以 springboot为基础的物流信息化管理体系。首先，以需求为依据，对目前传统物流管理基础业务进行了较为详尽的了解和分析。根据需求分析结果进行了系统的设计，并将其划分为管理员、用户和员工三种角色：主要功能包括个人中心、用户管理、员工管理、部门管理、物品分类管理、物流公司管理、物流信息管理、配送信息管理、运输信息管理、装卸搬运管理、仓储信息管理、系统管理等。使用目前市场主流的技术 Springboot框架和Maven进行项目构建，使用Java开发语
UniApp轻松实现图片放大查看功能
weixin_45734165的博客
08-26 380
然后，在export default代码块中，定义了一个preview方法来实现图片放大查看的功能。其中，images参数是一个图片数组，用于传递需要预览的图片列表。在uniapp中，可以使用第三方插件来实现图片放大查看功能，其中比较常用的插件是uni-ImagePreview。通过以上步骤，我们就可以在uniapp中使用图片预览插件实现图片放大查看功能了。在使用图片预览插件时，要确保传递给插件的图片路径是正确的。如何在uniapp中使用图片预览插件实现图片放大查看功能，需要具体代码示例。
uni-app中分页器的实现
weixin_51480428的博客
08-27 437
刚进页面的时候，接收上一个页面传递过来的查询参数，此时调用后端查询接口，这时候的pageSize和pageNum值是固定的，默认查询第一页，同时将数据总条数设置给total，组件会自动根据你设置的pageSize大小和后端查询出的total计算出总的页数。后面就是用户点击上一页或者下一页按钮来触发change函数，传来当前的页数，你再去调用接口查询当前页码的数据即可。
uniapp 三级联动省市区
08-15
在uniapp中实现三级联动省市区的功能，可以使用自定义插件pickerAddress来实现。首先，在页面代码中引入pickerAddress组件，并在data中定义一个txt变量用于显示选择的地址。然后，在methods中定义一个change方法，当...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值