zhishifufei_uniapp/pages/index/position.vue

<template>
	<BaseContainer class="position flex">
		<NavBar title="城市列表" />
		<view class="position-box" id="position">
			<view class="search-box flex flex-center-x" :style="scrollTop > 50 ? 'position: fixed; top: calc(88rpx + var(--safe-top)); left: 0;width: 100%;background: #fff;box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(68,68,68,0.4);' : ''">
			  <i class="iconfont2 iconsousuo"></i>
			  <input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜入城市名、拼音或首字母查询"  placeholder-class="input-placeholder"/>
			  <i v-show="search" class="iconfont iconguanbi2" @click="search = ''"></i>
			</view>
			<view class="now-position p-box">
				<view class="now-title p-title">你所在地区</view>
				<view class="p-list flex">
					<view class="now-value p-value">{{ position }}</view>
				</view>
			</view>
			<!-- <view class="history-position p-box">
				<view class="history-title p-title">历史访问目的地</view>
				<view class="p-list flex">
					<view v-for="(item, index) in historyList" :key="index" class="history-value p-value">{{ item }}</view>
				</view>
			</view> -->
			<view class="hot-position p-box">
				<view class="hot-title p-title">热门城市</view>
				<view class="p-list flex">
					<view v-for="(item, index) in hotList" :key="index" class="hot-value p-value" @click="position = item.name">{{ item.name }}</view>
				</view>
			</view>
			<view class="city-list">
				<view v-for="(item, index) in Object.keys(cityList)" :key="index" class="city-item" :id="item">
					<view class="city-label">{{ item }}</view>
					<view v-for="(city, k) in cityList[item]" class="city" @click="position = city.name">
						{{ city.name }}
					</view>
				</view>
			</view>
			<view class="city-filter">
				<view v-for="(item, index) in Object.keys(cityList)" :key="index" class="city-Upper" @click="scrollItem(item)">{{ item }}</view>
			</view>
		</view>
	</BaseContainer>
</template>

<script>
	import { city_list } from '@/api/index';
	export default {
		data() {
			return {
				search: '',
				position: '',
				// historyList: ['武汉', '武汉', '武汉武汉武汉武汉武汉'],
				hotList: [],
				cityList: [],
				scrollTop: 0,
				cityUpper: '',
			};
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop;
		},
		watch: {
			position() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.currentPosition = this.position;
			},
		},
		onLoad(options) {
			this.position = options.position;
			console.log(options);
			this.getCityList();
		},
		methods: {
			onSearch() {},
			async getCityList() {
				try{
					const { data } = await city_list();
					console.log(data);
					this.hotList = data.hotList;
					this.cityList = data.cityList;
				}catch(e){
					//TODO handle the exception
				}
			},
			scrollItem(item) {
				this.cityUpper = item;
				const query = uni.createSelectorQuery().in(this);
				uni.createSelectorQuery().select("#position").boundingClientRect(data=>{
					console.log(data);
				　　uni.createSelectorQuery().select(`#${item}`).boundingClientRect((res)=>{
							console.log(res);
				　　　　uni.pageScrollTo({
				　　　　　　duration:100,
				　　　　　　scrollTop:res.top - data.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				　　　　})
				　　}).exec()
				}).exec();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.position {
		flex-direction: column;
		.position-box {
			flex: 1;
			margin-top: 18rpx;
			background: #fff;
			padding: 30rpx 55rpx 30rpx 35rpx;
			.search-box {
				width: 660rpx;
				background: #F2F2F2;
				height: 54rpx;
				border-radius: 27rpx;
				padding: 0 30rpx;
				margin-bottom: 44rpx;
				.input-placeholder {
					color: #999999;
					font-size: 24rpx;
				}
				input {
					flex: 1;
					margin-left: 20rpx;
					color: #333;
					font-size: 24rpx;
				}
			}
			.p-box {
				margin-top: 24rpx;
				&.now-position {
					margin-top: 0;
				}
				.p-title {
					color: #666666;
					font-size: 28rpx;
					line-height: 28rpx;
					margin-bottom: 40rpx;
				}
				.p-list {
					flex-wrap: wrap;
					.p-value {
						width: 194rpx;
						height: 68rpx;
						border-radius: 3rpx;
						border: 1px solid #ECECEC;
						font-size: 28rpx;
						color: #222222;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding: 0 16rpx;
						line-height: 68rpx;
						text-align: center;
						margin-right: 20rpx;
						margin-bottom: 18rpx;
					}
				}
			}
			.city-list {
				margin-top: 32rpx;
				.city-item {
					.city-label {
						color: #666666;
						font-size: 28rpx;
						margin: 30rpx 0;
					}
					.city {
						height: 90rpx;
						line-height: 90rpx;
						color: #222222;
						font-size: 28rpx;
						border-bottom: 1px solid #F4F4F4;
					}
				}
			}
			.city-filter {
				position: fixed;
				top: 50%;
				transform: translateY(-50%);
				right: 35rpx;
				width: 23rpx;
				font-size: 24rpx;
				color: #0082D4;
				font-weight: bold;
				.city-upper {
					margin-bottom: 10rpx;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>