singer页左侧滚动的时候右侧跟随高亮显示

1.封装scroll.vue的listenScroll属性和方法，用来确定监听listview.vue的滚动事件

2.将listview.vue的listenScroll属性默认设置为true;

3.写scroll(pos)方法，实时监听左侧scroll位置，并根据滚动位置计算滚动到了索引为哪一个值；

4.写calculateHeight方法，计算每个group得高度，并添加到数组listheight中

5.watch用延时函数监听singerlist的数据变化，并重新计算每个group的高度。

6.通过better-scroll监听得到左边的scrolly的变化，然后循环遍历listheight数组，看落在哪一个区间，得到currentIndex=i;

7.给Li添加current类，通过对象，当currentIdnex=index的时候

代码如下：

//scroll.vue
   _initScroll(){
          if(!this.$refs.wrapper){
            return
          }
          this.scroll = new BScroll(this.$refs.wrapper,{
            probeType: this.probeType,
            click: this.click
          })
          if(this.listenScroll){//初始化时候判断是否监听滚动
            let _this=this
            this.scroll.on('scroll',(pos)=>{
              _this.$emit('scroll',pos)
            })
          }
        },


//listview.vue
  listenLeftScoll(pos){//pos是scroll组件传递过来的
        this.scrollLeftY=pos.y
      },
 _calculateHeight() {//计算左边高度；并用watch监听；
        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)//listHeight;我们能确定洛在哪一个区间

        }
      },

  watch:{
      singerList(){
        setTimeout(() => {
          this._calculateHeight()
        }, 20)
      },
      scrollLeftY(newY){
         const listHeight = this.listHeight
        console.log(listHeight)
        if(newY>0){//说明是向下拉，不是向上滚
           this.currentIndex=0;
           return
        }
        for(let i=0 ; i<listHeight.length -1; i++){//循环看落在哪一个区间
           let height1 = listHeight[i]
           let height2 = listHeight[i+1]
           if(!height2 || (-newY >= height1 && -newY <height2)){
             this.currentIndex =i
             // fixedTitle代码
             this.diff = height2 + newY;//上线与滚动的值，因为newY是负值，相当于减去：然后监视diff的变化
            return
          }

        }
        this.currentIndex = listHeight.length -2

      },
}

html代码：

<scroll class="listview"
             :listenScroll="listenScroll"
             @scroll="listenLeftScoll"
              :probe-type="probeType"
             :singerList="singerList"
             ref="listview">