11

components/nyn-city-list/letter-list.vue

@@ -0,0 +1,120 @@
+<template>
+	<!-- 首字母检索 -->
+	<view>
+		<view class="letter touch" @touchstart.stop="searchStart" @touchmove.stop="searchMove" @touchend.stop="searchEnd">
+			<!-- 右边字母数据数据 触摸事件-->
+			<view class="letter-item" v-for="item in options" :key="item.key">{{item.key}}</view>
+			<!-- 左边字母跟右边字母true时 屏幕中心显示选中的首字母-->
+		</view>
+		<!-- 居中首字母样式 -->
+		<view class="cont-letter" v-if="isShowLetter">
+			{{showLetter}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			options: {
+				type: Array
+			},
+			length: {
+				type: Number
+			}
+		},
+		data() {
+			let windowHeight = uni.getSystemInfoSync().windowHeight
+			let startHeight = windowHeight * 0.1
+			return {
+				startHeight,
+				letterHeight: windowHeight - startHeight,
+				isShowLetter: false,
+				showLetter: ''
+			}
+		},
+		computed: {
+			letters() {
+				const arr = []
+				for (let key in this.options) {
+					arr.push(this.options[key])
+				}
+				return arr.key
+			}
+		},
+		methods: {
+			getLetter(pageY) {
+				let index = ((pageY - this.startHeight) / this.letterHeight) * this.options.length
+				return this.options[parseInt(index)].key
+			},
+			/* 检索字母拖动开始 */
+			searchStart(e) {
+				let pageY = e.touches[0].clientY;
+				this.showLetter = this.getLetter(pageY);
+				this.$emit("touchmove", this.showLetter)
+				this.isShowLetter = true
+				return false
+			},
+			/* 检索字母拖动中 */
+			searchMove(e) {
+				let pageY = e.touches[0].clientY;
+				this.showLetter = this.getLetter(pageY);
+				this.$emit("touchmove", this.showLetter)
+				return false
+			},
+			/* 检索字母拖动结束 */
+			searchEnd() {
+				setTimeout(() => {
+					this.isShowLetter = false
+				}, 1000)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/* 首字母样式 */
+	.letter {
+		position: absolute;
+		right: 0;
+		top: 10%;
+		width: 30px;
+		height: 90%;
+		text-align: center;
+		justify-content: center;
+		display: flex;
+		flex-direction: column;
+		color: #666;
+		background-color: transparent;
+		z-index: 1;
+	}
+
+	/* 右边首字母样式 */
+	.touch {
+		color: #666;
+		font-size: 28rpx;
+	}
+
+	.letter-item {
+		color: #1B66FF;
+		flex-grow: 1;
+	}
+
+	/* 居中显示的选中首字母 */
+	.cont-letter {
+		background-color: #666;
+		color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		margin: -50px;
+		width: 100px;
+		height: 100px;
+		border-radius: 10px;
+		font-size: 26px;
+		z-index: 1
+	}
+</style>