app/pages/me/chooseProvince.nvue

<template>
	<view class="page">
		<view class="line"></view>

		<scroll-view scroll-y="true">
			<view
				v-for="(item, index) in provinceList"
				class="item"
				:class="{ active: index == activeIndex }"
				:key="index"
				@click="chooseLocation(item.province_id, item.province_name)"
				@touchstart="touchstartLocation(index)"
				@touchend="touchendLocation"
			>
				<text class="item-text">
					{{ item.province_name }}
				</text>

				<view class="right-part">
					<image
						class="right-arrow"
						src="/static/images/icon-right-arrow2.png"
					></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
import provinceList from '@/json/area_province.js';
export default {
	data() {
		return {
			provinceList: [],
			activeIndex: -1
		};
	},
	onLoad() {
		this.provinceList = provinceList;
	},
	methods: {
		touchstartLocation(index) {
			this.activeIndex = index;
		},
		touchendLocation() {
			this.activeIndex = -1;
		},

		chooseLocation(provinceId, provinceName) {
			uni.setStorageSync('myLocationProvince', provinceName);
			uni.navigateTo({
				url: 'chooseCity?provinceId=' + provinceId
			});
		}
	}
};
</script>

<style scoped>
.right-arrow {
	width: 32rpx;
	height: 32rpx;
	margin-left: 20rpx;
}
.line {
	height: 1rpx;
	background-color: #393a41;
	width: 750rpx;
}
.item-text {
	color: #ffffff;
	align-items: center;
	font-size: 30rpx;
}

.right-part {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.item {
	padding-left: 30rpx;
	padding-right: 30rpx;
	width: 750rpx;
	height: 120rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

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