El subprograma uniapp utiliza el selector selector de provincia, ciudad, condado y distrito

El marco es uview2.0

Representaciones:

1. Descarga el archivo de la ciudad

archivo  city.js    contraseña m1y8

2. Importar archivos de ciudades

El archivo se coloca en el archivo utils en el directorio raíz del proyecto

el código se muestra a continuación

html:

Si se usa en el componente de formulario del marco como yo y hay un cuadro de entrada de entrada, puede hacer que el teclado virtual y el selector aparezcan al mismo tiempo. En este caso, puede consultar el subprograma uniapp para evitar el teclado en pantalla aparezca cuando se haga clic en el cuadro de entrada .

¡Se recomienda encarecidamente agregar el atributo deshabilitado a la etiqueta de entrada para evitar que aparezca el teclado virtual!

<u--form labelPosition="left">
    <u-form-item label="省市县区:" borderBottom labelWidth="70" @tap="cityShow = true">
	    <u--input v-model="cityName" border="none" placeholder="请选择省市县区"></u--input>
	    <!-- 城市选择 -->
	    <u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="cityConfirm" 
        @change="changeHandler" @cancel="cityShow = false"></u-picker>
    </u-form-item>
</u--form>

js: 

<script>
	// 导入城市js文件
	import cityData from '@/utils/city.js'
	export default {
		data() {
			return {
				cityName: "请选择省市县区",

				// 城市选择器
				cityShow: false,
				// 打开选择器显示默认城市
				cityList: [],
 
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
			};
		},
		onLoad() {
			// 城市选择器初始化
			this.initCityData();
		},
		methods: {
			// 城市选择器
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},

			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},

			// 单击确认按钮时执行
			cityConfirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.cityName = e.value.join("-");
				// 隐藏城市选择器
				this.cityShow = false;
			},
		}
	}
</script>