【地址选择器】好用，省市/省市区

步骤一：地址数据源address-data.js-放在我的资源里面了

步骤二：HTML

<u-picker keyName="name" :show="addressShow" ref="uPicker" @cancel="pickerCancel" :columns="columns"
	@confirm="confirm" @change="changeHandler">
</u-picker>

步骤二：js

• 引入地址数据

import {
    
    
	areaList
} from '@/common/address-data.js'

• data中定义：

form:{
    
    
	where:'',
},
//地址展示框
addressShow: false,
getLocationState: false,
//要提交的表单信息
userAddress: {
    
    },
//三级联动组件展示框
addressShow: false,
getAddressText: "",
//省市区数据
columns: [
	[],
	[],
	[]
],

• 数据初始化

created() {
    
    
	console.log(areaList)
	this.columns[0] = areaList;
	this.columns[1] = areaList[0].cities;
	this.columns[2] = areaList[0].cities[0].districts;
},

• methods中

//选择区域
getisshow() {
    
    
	this.addressShow = true
},
//初始化
pickerCancel() {
    
    
	//隐藏联动展示框
	this.addressShow = false;
	//重置联动数据为初始状态
	this.$refs.uPicker.setIndexs([0, 0, 0], true);
	this.$refs.uPicker.setColumnValues(0, areaList);
	this.$refs.uPicker.setColumnValues(1, areaList[0].cities);
	this.$refs.uPicker.setColumnValues(2, areaList[0].cities[0].districts);
},
//三级联动框滑动选择后触发的事件
changeHandler(e) {
    
    
	const {
    
    
		columnIndex,
		value,
		values, // values为当前变化列的数组内容
		index,
		indexs,
		// 微信小程序无法将picker实例传出来，只能通过ref操作
		picker = this.$refs.uPicker
	} = e
	// 当第一列值发生变化时，变化第二列(后一列)对应的选项
	if (columnIndex === 0) {
    
    
		// picker为选择器this实例，变化第二列对应的选项
		picker.setColumnValues(1, areaList[index].cities)
		picker.setColumnValues(2, areaList[indexs[0]].cities[0].districts)
	} else if (columnIndex === 1) {
    
    
		// picker为选择器this实例，变化第三列对应的选项
		picker.setColumnValues(2, areaList[indexs[0]].cities[indexs[1]].districts)
	}
},
// 点击确定事件,回调参数为包含columnIndex、value、values
confirm(e) {
    
    
	console.log('confirm', e)
	//省
	this.userAddress.province = e.value[0].name;
	//市
	this.userAddress.city = e.value[1].name;
	//区
	this.userAddress.area = e.value[2].name;
	//区域代码
	this.userAddress.regionId = e.value[2].id;
	this.form.where = this.userAddress.province + '  ' + this.userAddress.city + '  ' + this.userAddress
		.area;
	this.pickerCancel();
},

附赠一个有需要的时候用的代码

poptanqi() {
    
    
				let that = this;
				if (!that.getLocationState) {
    
    
					uni.showLoading({
    
    
						title: '加载中'
					});
					uni.getLocation({
    
    
						type: 'wgs84',
						isHighAccuracy: true,
						success: function(res) {
    
    
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							//自定义的接口,按照腾讯位置服务文档接入
							getAdInfoByLngAndLat({
    
    
								longitude: res.longitude,
								latitude: res.latitude
							}).then(res2 => {
    
    
								if (res2.data.head.code == '0') {
    
    
									let resData = res2.data.details;
									if (resData.status == 0) {
    
    
										that.$set(that.userAddress, 'province', resData.result.ad_info
											.province);
										that.$set(that.userAddress, 'city', resData.result.ad_info
											.city);
										that.$set(that.userAddress, 'area', resData.result.ad_info
											.district);
										that.$set(that.userAddress, 'regionId', resData.result.ad_info
											.adcode + '000');
										that.getLocationState = true;
									} else {
    
    
										that.$nextTick(() => {
    
    
											that.$refs["cityPicker"].show();
										})
									}
								} else {
    
    
									that.$nextTick(() => {
    
    
										that.$refs["cityPicker"].show();
									})
								}
							});
						},
						fail(err) {
    
    
							that.addressShow = true;
							console.log('遇到错误!');
							console.log(err);
						},
						complete() {
    
    
							uni.hideLoading();
						}
					});
				} else {
    
    
					that.$nextTick(() => {
    
    
						this.$refs["cityPicker"].show();
					})
				}
			},