11

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

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