notarization_applet/pagesHome/city/index.vue

<template>
	<view class="main-Location">
		<!-- 字母区域 -->
		<view class="Location-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)"
				:style="{'color': LetterId === l ? '#2979ff' : '#000' }">{{l}}</view>
		</view>
		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 字段
	const field = ref('');
	const CityName = ref('');
	const LatterName = ref(['全', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']);
	const CityList = ref($config.china);
	const LetterId = ref('');
	onLoad(async (options) => {
		field.value = options && options.field || ''
	})
	// 获取定位点
	const getLetter = (name) => {
		LetterId.value = name
		//  跳转城市首字母定位
		uni.pageScrollTo({
			selector: '#' + name,
			duration: 300
		})
	};
	// 存储城市缓存（点击城市）
	const getStorage = (item) => {
		item.field = field.value
		uni.$emit('toCity', item)
		// 4. 返回上一页面
		uni.navigateBack({
			delta: 1 // 返回的页面数
		})
	};
</script>
<style lang="scss" scoped>
	.main-Location {
		height: 100vh;
	}

	// 侧边字母选择栏
	.Location-Letter {
		position: fixed;
		right: 5px;
		top: 80px;
		width: 15px;
		z-index: 100;
		color: #c8c9cc;

		view {
			display: block;
			width: 15px;
			text-align: center;
			padding: 1px 0 0 0;
			font-size: var(--font12Size);
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	// 城市列表
	.ynq-CityList {

		padding: 10px 0;

		.ynq-CityLetter {
			font-size: var(--font16Size);
			border-bottom: 1px solid #f7f7f7;
			padding: 5px;
			background-color: #f4f4f5;
			border-bottom: 0.5px solid #dadbde;
		}

		.ynq-CityLine {
			background-color: #fff;
			margin: 10px 0;

			text {
				display: block;
				line-height: 30px;
				padding: 10px 15px;
				font-size: var(--font14Size);
				border-bottom: 1px solid var(--f4Color);
			}
		}
	}
</style>