3.右边字母列表滑动或者点击时对应的字母高亮
_calculateHeight () {
this.listHeight = []
const list = this.$refs.listgroup
let height = 0
this.listHeight.push(height)
for (let i = 0; i < list.length; i++) {
let item = list[i]
height += item.clientHeight
this.listHeight.push(height)
}
}
watch: {
data () {
setTimeout(() => {
this._calculateHeight()
}, 20)
},
scrollY (newY) {
const listHeight = this.listHeight
if (newY > 0) {
this.currentIndex = 0
return
}
for (let i = 0; i < listHeight.length - 1; i++) {
const height1 = listHeight[i]
const height2 = listHeight[i + 1]
if (-newY >= height1 && -newY < height2) {
this.currentIndex = i
return
}
}
this.currentIndex = listHeight.length - 2
}
}
}
(1)监测页面数据是否接受成功,如果接受成功并渲染则调用_calculateHeight计算每一个(列表+标题)的高度,存入在一个数组中。数组中每一个列表高度是前面所有列表高度的总和。
(2)监测scrollY的变化,滑动的时候scrollY就会发生变化,此时将上一步计算得到的数组进行遍历,得到当前列表的高度,和下一个列表的高度,如果srcollY的位置在这两个位置之间,则设置currentIndex为当前列表的index。在dom中设置current属性,设置条件判断当前字母是否应该高亮。判断条件(:class="{‘current’:currentIndex === index}")