vue利用better-scroll实现通讯录式列表滚动和左右联动效果(2)

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}"）