首页

pages/index/uindexlist.vue

@@ -0,0 +1,89 @@
+<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>