uniapp开发app 页面的逻辑，选择城市后，通过code换取街道信息

页面源码

结合城市选择组件进行使用

<template>
	<view class="citylist">
		<scroll-view :style="{ height: windowH }" scroll-y="true" :scroll-top="scrollTop" show-scrollbar="false">
			<view>
				<view class="city-list-container">
					<div class="cityinfo">
						<u-cell-group>
							<citySelection @getdata="getcity">
								<u-cell v-if="address" :title="'当前城市:'+ address" arrow-direction="down" isLink
									value="选择县/区"></u-cell>
								<u-cell v-else title="当前城市:请选择" arrow-direction="down" isLink value="选择县/区"></u-cell>
							</citySelection>
						</u-cell-group>
					</div>
					<!-- 城市列表 -->
					<view id="citytitle" class="city-list-content">
						<view class="city_title_wrap" v-for="(city, index) in list" :key="index">
							<view class="city-list city-list-block">
								<view class="city-item" @tap="selectedCity2(city)">{{ city.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import citySelection from '../../components/citySelection/citySelection.vue'
	export default {
		components: {
			citySelection
		},
		data() {
			return {
				title: [],
				windowH: '',
				scrollTop: 0,
				list: [],
				address: ''
			};
		},
		methods: {
			getcity(e) {
				console.log(e)
				this.citycode = e.code
				this.address = e.address
				this.getjson()
			},
			selectedCity2(e) {
				console.log(e);
				uni.setStorageSync('city', e.name);
				uni.navigateBack({});
			},
			getjson() {
				var that = this;
				var url = "http://images.wanjunshijie.com/json/town/" + this.citycode + ".json"
				uni.request({
					url: url, //仅为示例，并非真实接口地址。
					data: {
						text: 'uni.request'
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						that.streetdata = res.data
						that.list = []
						if (res.data) {
							var obj = res.data
							Object.keys(obj).forEach(function(key) {
								var data = {
									id: key,
									name: obj[key],
									checked: false
								}
								that.list.push(data)
							});
						}
					}
				});
			},
		},
	};
</script>

<style lang="less">
	.citylist {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}

	.city-list-container {
		width: 100%;
		height: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #333;

		.city-list-content {
			margin-right: 25px;
		}

		.city-title {
			padding-left: 15px;
			line-height: 30px;
		}

		.city-list {
			border-bottom: 1rpx solid #F5F5F5;
		}

		.city-title-letter {
			padding-left: 25px;
		}

		.city-list-block {
			background-color: #fff;

			.city-item {
				height: 44px;
				line-height: 44px;
				margin-left: 15px;
				border-bottom: 1px solid #c8c7cc;

				&:last-child {
					border: 0;
				}
			}
		}

		.city-list-inline {
			background-color: #fff;
			padding-bottom: 8px;
			overflow: hidden;

			&::after {
				content: '';
				clear: both;
			}

			.location-city,
			.city-item {
				float: left;
				background: #fff;
				width: 29%;
				height: 33px;
				margin-top: 15px;
				margin-left: 4%;
				padding: 0 4px;
				border: 1px solid #e6e6e6;
				border-radius: 3px;
				line-height: 33px;
				text-align: center;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.location-city {
				width: auto;
				min-width: 30%;
				padding: 0 20px;
			}
		}
	}

	.navrightcity {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
		width: 35px;
		z-index: 10;
		text-align: center;
		font-size: 12px;

		.nav-item {
			height: 16px;
			height: 2.8vh;
		}

		.nav-letter {
			width: 15px;
			margin-left: 15px;
		}
	}

	.fixtitle {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;

		.city-title {
			padding-left: 15px;
			line-height: 30px;
			font-size: 14px;
			color: #333;
			background-color: #fff;
		}
	}

	.cityinfo {
		background: #F5F5F5;
	}
</style>