app/pages/me/chooseDistrict.nvue

<template>
	<view class="page">
		<view class="line"></view>
		<scroll-view scroll-y="true">
			<view
				v-for="(item, index) in districtList"
				class="item"
				:class="{ active: index == activeIndex }"
				:key="index"
				@click="chooseLocation(item.district_id, item.district_name)"
				@touchstart="touchstartLocation(index)"
				@touchend="touchendLocation"
			>
				<text class="item-text">
					{{ item.district_name }}
				</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import districtList from '@/json/area_district.js';
export default {
	data() {
		return {
			districtList: [],
			activeIndex: -1
		};
	},
	onLoad(params) {
		let cityId = params.cityId;
		let realDistrictList = [];
		for (let i = 0; i < districtList.length; i++) {
			let tempCityId = districtList[i].city_id;
			if (tempCityId == cityId) {
				realDistrictList.push(districtList[i]);
			}
		}
		this.districtList = realDistrictList;
	},
	methods: {
		touchstartLocation(index) {
			this.activeIndex = index;
		},
		touchendLocation() {
			this.activeIndex = -1;
		},
		chooseLocation(districtId, districtName) {
			uni.setStorageSync('myLocationDistrict', districtName);
			uni.navigateBack({
				delta: 3
			});
		}
	}
};
</script>

<style scoped>
.line {
	height: 1rpx;
	background-color: #393a41;
	width: 750rpx;
}
.item-text {
	color: #ffffff;
	align-items: center;
	font-size: 30rpx;
}
.item {
	padding-left: 30rpx;
	padding-right: 30rpx;
	width: 750rpx;
	height: 120rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.active {
	background-color: #4a4c52;
}
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #181b27;
}
</style>