<template>
	<view class="content">
		<view class="container">
			<!-- 建议放在外层 -->
				<view class="contentnav">
					当前城市
				</view>
				<!-- 不建议放在层层嵌套的view中，除非您清楚知道自己为什么需要这么做 -->
		</view>
		<u-index-list class="container" :index-list="indexList" style="height: 100%;" @select='clickSelect'
			:scrollTop="scrollTop">
			<view v-for="(item, index) in itemArr" :key="index" style="height: 100%;">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item style="height: 100%;">
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<!-- <view class="list-cell">
						{{item.cities}}
					</view> -->
					<view class="list-cell" v-for="(cell,index1) in item.cities" :key="index1">
						{{cell.name}}
					</view>
				</u-index-item>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import city from '@/common/js/city.json'
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: city.alphabet,
				itemArr: city.cityList
			}
		},
		methods: {
			clickSelect(e) {
				//从当前位置到达目标位置
				console.log(">>>当前节点", e, this.scrollTop)
				try {
					uni.createSelectorQuery().select('#' + e).boundingClientRect((data) => {
							console.log(">>data", data)
							//目标位置的节点：类或者id
							uni.createSelectorQuery().select('.container').boundingClientRect((res) => {
									console.log(data, res)
									console.log(">>res.top", res.top)
									//最外层盒子的节点：类或者id
									this.$nextTick(() => {
										uni.pageScrollTo({
											scrollTop: data.top - res.top,
											// selector: '#' + e,
											duration: 100 //app端这个必须设置成0
										})
									})
								})
								.exec()
						})
						.exec()
				} catch (e) {

				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 使用>>>来穿透组件边界 */
	.content {
		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}
	}
</style>