邓洁 : 区域下拉框数据获取及完善定位功能

components/DropDown/DropDownItem.vue

@@ -1,14 +1,12 @@
 <template>
-	<view class="root">
-		<view class="mask" @click="handleMask"/>
-		<view class="list-container">
-			<view 
-				class="item"
-				v-for="(item,index) in list"
-				:class="{isActive: activeIndex === index}"
-				@click="handleActive(index)"
-			>
-				<text class="list-text">{{item}}</text>
+	<view>
+		<view class="root">
+			<view class="mask" @click="handleMask"></view>
+			<view class="list-container">
+				<view class="item" v-for="(item,index) in list" :class="{isActive: activeIndex === index}"
+					@click="handleActive(index)">
+					<text class="list-text">{{item}}</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -19,80 +17,90 @@
 		props: {
 			list: {
 				type: Array,
-				default(){
-					return	[]
+				default () {
+					return []
+				}
+			},
+			type: {
+				type: String,
+				default () {
+					return ''
 				}
 			}
 		},
-		data(){
-			return{
-				activeIndex:-1
+		data() {
+			return {
+				activeIndex: -1
 			}
 		},
 		methods: {
-		  handleMask() {
-		    this.$emit('cancelDrop');
-		  },
-		  async handleActive(index) {
-		    this.activeIndex = index;
-		    // 设置一个定时器，等待200毫秒
-		    const delayPromise = this.delay(200);
-		    // 等待定时器完成
-		    await delayPromise;
-		    this.handleMask();
-		  },
-		  delay(ms) {
-		    return new Promise((resolve) => {
-		      // 设置一个定时器，并将定时器的ID存储在this.timerId中
-		      this.timerId = setTimeout(() => {
-		        resolve();
-		        // 清除定时器
-		        clearTimeout(this.timerId);
-		      }, ms);
-		    });
-		  },
+			handleMask() {
+				this.$emit('cancelDrop');
+			},
+			async handleActive(index) {
+				this.activeIndex = index;
+				// 设置一个定时器，等待200毫秒
+				const delayPromise = this.delay(200);
+				// 等待定时器完成
+				await delayPromise;
+				this.handleMask();
+			},
+			delay(ms) {
+				return new Promise((resolve) => {
+					// 设置一个定时器，并将定时器的ID存储在this.timerId中
+					this.timerId = setTimeout(() => {
+						resolve();
+						// 清除定时器
+						clearTimeout(this.timerId);
+					}, ms);
+				});
+			},
 		},
 
 	}
 </script>
 
 <style lang="scss" scoped>
-	.isActive{
+	.isActive {
 		color: #CC3333;
 	}
-	.mask{
-	    position: fixed;
-	    top: 0;
-	    left: 0;
-	    width: 100%;
-	    height: 100%;
-	    background-color: #000;
-		-webkit-backdrop-filter:saturate(150%) blur(8px);
-		background-color:rgba(0,0,0,.3);
+
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #000;
+		-webkit-backdrop-filter: saturate(150%) blur(8px);
+		background-color: rgba(0, 0, 0, .3);
 		z-index: 20;
 	}
+
 	.root {
 		position: absolute;
 		top: 0;
 		width: 100%;
-		
+
 		font-size: 28rpx;
 		background-color: #fff;
 		position: absolute;
 		z-index: 1;
+
 		.list-container {
 			position: relative;
 			background-color: #fff;
 			width: 100%;
 			z-index: 21;
-			
 			border-radius: 0px 0px 20px 20px;
+			height: 320rpx;
+			overflow-y: auto;
 			.item {
 				border-top: 1px solid #EEEEEE;
 				font-weight: 500;
 				padding-left: 61rpx;
 				height: 80rpx;
-				
+
 				display: flex;
 				flex-direction: column;
 				justify-content: center;