本文主要是介绍滑动列表数据按照A-Z首字母排列，右边A-Z能动态定位到相应字母位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
核心实现，循环右边字母列表，然后找出左边数据列表，对应id为相应字母的元素，计算元素到顶部和底部的距离，就是范围，然后滑动监听，通过滑动的距离在哪个范围确定右边要定位到哪个字母，实现最终效果：
this.$nextTick(() => {this.itemsParent = []for (let i = 0; i < this.listforgirht.length; i++) {const height = document.getElementById(this.listforgirht[i]).offsetHeightconst top = document.getElementById(this.listforgirht[i]).offsetTopvar items = { tag: '', topInstance: '', bottomInstance: '', position: '' }if (i === 1) {this.$set(items, 'tag', this.listforgirht[i])this.$set(items, 'topInstance', 0)this.$set(items, 'bottomInstance', height)this.$set(items, 'position', i)}this.$set(items, 'tag', this.listforgirht[i])this.$set(items, 'topInstance', top)this.$set(items, 'bottomInstance', top + height)this.$set(items, 'position', i)this.itemsParent.push(items)}console.log(this.itemsParent)})},scrollListen (event) {const top = event.target.scrollTopfor (const item6 of this.itemsParent) {if (top >= item6.topInstance && top <= item6.bottomInstance) {const pos = item6.positionthis.indexm = posconsole.log(pos)return}}console.log(event.target.scrollTop)console.log('123456')}
这篇关于滑动列表数据按照A-Z首字母排列，右边A-Z能动态定位到相应字母位置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
