核心实现,循环右边字母列表,然后找出左边数据列表,对应id为相应字母的元素,计算元素到顶部和底部的距离,就是范围,然后滑动监听,通过滑动的距离在哪个范围确定右边要定位到哪个字母,实现最终效果:
this.$nextTick(() => {
this.itemsParent = []
for (let i = 0; i < this.listforgirht.length; i++) {
const height = document.getElementById(this.listforgirht[i]).offsetHeight
const top = document.getElementById(this.listforgirht[i]).offsetTop
var 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.scrollTop
for (const item6 of this.itemsParent) {
if (top >= item6.topInstance && top <= item6.bottomInstance) {
const pos = item6.position
this.indexm = pos
console.log(pos)
return
}
}
console.log(event.target.scrollTop)
console.log('123456')
}