uniapp字母条

字母条组件

使用组件

<letter-list @toastTxt="toastTxt" @clickToastTxt="clickToastTxt"></letter-list>
......
<!-- 滑动字母条显示对应字母 -->
<view class="toastLetter" v-if="flag">{{toastText}}</view>

组件通信的方法

			// 滑动字母条事件
			toastTxt (obj) {
				this.toastText = obj.letter.name
				this.flag = obj.flag
				this.scrollToViewId = 'letter' + obj.moveIndex
			},
			// 点击字母条事件
			clickToastTxt (obj) {
				this.toastText = obj.letter.name
				this.flag = obj.flag
				this.scrollToViewId = 'letter' + obj.clickIndex
				let timer = setTimeout(e => {
					this.flag = false
					this.scrollToViewId = ''
					clearTimeout(timer)
				}, 400)
			},

组件详情

<template>
	<view class="letter-box" :style="{top: top + 'px'}">
		<view class="letter-item font9" :style="[{width: screenHeight / 27 +'px'},{height: screenHeight / 27 + 'px'},{lineHeight: screenHeight /27+'px'}]" v-for="(item,index) in letterList" :key="index" :class="{'letter-item-active': index == currentIndex}"
		 @click="clickLetter(index)" @touchstart="handletouchStart" @touchmove.stop.prevent="handletouchMove($event)"
		 @touchend="handletouchEnd">{{item.name}}</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data () {
			return {
				screenHeight: 0,
				currentIndex: 0,
				top: 0,
				touchStatus: false,
				letterList: [{
						name: "A"
					}, {
						name: "B"
					}, {
						name: "C"
					}, {
						name: "D"
					}, {
						name: "E"
					}, {
						name: "F"
					}, {
						name: "G"
					}, {
						name: "H"
					},
					{
						name: "I"
					}, {
						name: "J"
					}, {
						name: "K"
					}, {
						name: "L"
					}, {
						name: "M"
					}, {
						name: "N"
					}, {
						name: "O"
					}, {
						name: "P"
					}, {
						name: "Q"
					},
					{
						name: "R"
					}, {
						name: "S"
					}, {
						name: "T"
					}, {
						name: "U"
					}, {
						name: "V"
					}, {
						name: "W"
					}, {
						name: "X"
					}, {
						name: "Y"
					}, {
						name: "Z"
					}, {
						name: "#"
					}
				]
			}
		},
		created () {
			this.screenHeight = getApp().globalData.screenHeight - 200
			this.top = getApp().globalData.headHeight + 50
			console.log(this.screenHeight)
		},
		methods: {
			handletouchStart () {
				this.touchStatus = true

			},
			clickLetter (index) {
				this.currentIndex = index
				this.$emit("clickToastTxt", {
					letter: this.letterList[this.currentIndex],
					flag: true,
					clickIndex: this.currentIndex
				})
			},
			handletouchMove (e) {
				if (this.touchStatus) {
					//函数节流
					if (this.timer) {
						clearTimeout(this.timer)
					}
					this.timer = setTimeout(() => {
						const startY = 150
						const touchY = e.touches[0].clientY - 40
						// console.log(touchY)
						const index = Math.floor((touchY - startY) / 15)
						if (index >= 0 && index < 27) {
							// eventBus.$emit('change', this.letters[index])
							this.currentIndex = index
							// console.log(index)
							this.$emit("toastTxt", {
								letter: this.letterList[this.currentIndex],
								flag: true,
								moveIndex: this.currentIndex
							})
						}
					}, 16)

				}

			},
			handletouchEnd () {
				this.touchStatus = false
				this.$emit("toastTxt", {
					letter: this.letterList[this.currentIndex],
					flag: false,
					moveIndex: this.currentIndex
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.letter-box {
		width: 30px;
		position: fixed;
		// transform: translateY(-50%);
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
		background-color: #fff;
	}

	.letter-item {
		margin: 0 auto;
		text-align: center;

	}
</style>

使用scroll-view的:scroll-into-view="scrollToViewId"属性实现滚动到相应的位置。