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