uniapp实现调取接口实现三级城市联动选择(结合uview组件库)

效果图如上：封装了一个三级联动的组件，样式优化很简单这里只是做了个主要功能。

代码如下：
1、组件部分

<template>
	<view style="margin-top: 50rpx;">
		<u-button type="info" @click="open">选择地址</u-button>
		<u-popup v-model="show" mode="bottom" :zoom='true' border-radius="30">
			<view style="height: 980rpx;" closeable>
				<view style="height: 100rpx;line-height: 100rpx;text-align: center;">
					选择地区
				</view>
				<view class="tab">
					<u-tabs :list="list" active-color='#BF6477' :is-scroll="false" :current="current"></u-tabs>
				</view>
				<view style="height: 30rpx;border-top: 2rpx solid #BF6477;margin-top: 10rpx;">
				</view>
				<view style="display: flex;">
					<view class="list-cell">
						<scroll-view scroll-y="true" style="width: 100%;height: 700rpx;" scroll-with-animation="true"
							:show-scrollbar="false">
							<view v-for="(item,index) in province" :key="index"
								:class="item.ischeck?'single_active':'single'" @click="navChange(item)">
								{{item.area_name}}
							</view>
						</scroll-view>
					</view>
					<view class="list-cell">
						<scroll-view scroll-y="true" style="width: 100%;height: 700rpx;" scroll-with-animation="true"
							:show-scrollbar="false">
							<view v-for="(item,index) in city" :key="index"
								:class="item.ischeck?'single_active':'single'" @click="cityChoose(item)">
								{{item.area_name}}
							</view>
						</scroll-view>
					</view>
					<view class="list-cell">
						<scroll-view scroll-y="true" style="width: 100%;height: 700rpx;" scroll-with-animation="true"
							:show-scrollbar="false">
							<view v-for="(item,index) in district" :key="index"
								:class="item.ischeck?'single_active':'single'" @click="districtchoose(item)">
								{{item.area_name}}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseArea
	} from '@/servies/user.js'
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '请选择'
				}, {
					name: '请选择'
				}, {
					name: '请选择',
				}, ],
				show: true,
				province: [],
				city: [],
				district: [],
				citycode: 0,
				finalcheck_province: {},
				finalcheck_city: {},
				finalcheck_district: {},
				// indexList:[]
			}
		},
		created() {
			baseArea(this.citycode).then(res => {
				this.province = res.map(v => {
					return {
						...v,
						ischeck: false
					}
				});
			})
		},
		methods: {
			change(index) {
				this.current = index;
			},
			open() {
				this.show = true
			},
			navChange(m) {
				this.province.forEach(v => v.ischeck = false);
				const findindex = this.province.findIndex(v => v.area_name === m.area_name);
				this.province[findindex].ischeck = true;
				this.current = 1;
				if (this.citycode === 0) {
					this.list[0].name = m.area_name;
				};
				this.citycode = 1;
				this.finalcheck_province = m;
				baseArea(m.area_id).then(res => {
					this.city = res.map(item => {
						return {
							...item,
							ischeck: false
						}
					});
				})

			},
			cityChoose(m) {
				this.city.forEach(v => v.ischeck = false);
				const findindex = this.city.findIndex(v => v.area_name === m.area_name);
				this.city[findindex].ischeck = true;
				this.current = 2;
				if (this.citycode === 1) {
					this.list[1].name = m.area_name
				};
				this.finalcheck_city = m;
				this.citycode = 2;
				baseArea(m.area_id).then(res => {
					this.district = res.map(v => {
						return {
							...v,
							ischeck: false
						}
					});
				})

			},
			districtchoose(m) {
				this.district.forEach(v => v.ischeck = false);
				const findindex = this.district.findIndex(v => v.area_name === m.area_name);
				this.district[findindex].ischeck = true;
				this.finalcheck_district = m;
				if (this.citycode === 2) {
					this.list[2].name = m.area_name
				};
				this.show = false;
				const final = [
					this.finalcheck_province, this.finalcheck_city, this.finalcheck_district
				];
				this.$emit('change', {
					result: final
				})
			},

		}

	}
</script>

<style lang="less" scoped>
	.list-cell {
		width: 220rpx;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: true;

		.single {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.single_active {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: red;
		}

	}

	.tab {
		width: 550rpx;
		height: 80rpx;
		background-color: red;

	}
</style>

2、页面引用

```javascript
```<chooseAddr @change="change2"/>
import chooseAddr from '@/components/pickerAddress.vue'
	components: {
			chooseAddr
		},
	change2(res){
				console.log(res);
				uni.showToast({
					title:res.result[0].area_name+res.result[1].area_name+res.result[2].area_name,
					duration:2000,
					icon:'none'
				})
				
			},