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的时候

代码如下：

 1 //scroll.vue
 2    _initScroll(){
 3           if(!this.$refs.wrapper){
 4             return
 5           }
 6           this.scroll = new BScroll(this.$refs.wrapper,{
 7             probeType: this.probeType,
 8             click: this.click
 9           })
10           if(this.listenScroll){//初始化时候判断是否监听滚动
11             let _this=this
12             this.scroll.on('scroll',(pos)=>{
13               _this.$emit('scroll',pos)
14             })
15           }
16         },
17 
18 
19 //listview.vue
20   listenLeftScoll(pos){//pos是scroll组件传递过来的
21         this.scrollLeftY=pos.y
22       },
23  _calculateHeight() {//计算左边高度；并用watch监听；
24         this.listHeight = []
25         const list = this.$refs.listGroup
26         let height = 0
27         this.listHeight.push(height)
28         for (let i = 0; i < list.length; i++) {
29           let item = list[i]
30           height += item.clientHeight//求出总高度；
31           this.listHeight.push(height)//listHeight;我们能确定洛在哪一个区间
32 
33         }
34       },
35 
36   watch:{
37       singerList(){
38         setTimeout(() => {
39           this._calculateHeight()
40         }, 20)
41       },
42       scrollLeftY(newY){
43          const listHeight = this.listHeight
44         console.log(listHeight)
45         if(newY>0){//说明是向下拉，不是向上滚
46            this.currentIndex=0;
47            return
48         }
49         for(let i=0 ; i<listHeight.length -1; i++){//循环看落在哪一个区间
50            let height1 = listHeight[i]
51            let height2 = listHeight[i+1]
52            if(!height2 || (-newY >= height1 && -newY <height2)){
53              this.currentIndex =i
54              // fixedTitle代码
55              this.diff = height2 + newY;//上线与滚动的值，因为newY是负值，相当于减去：然后监视diff的变化
56             return
57           }
58 
59         }
60         this.currentIndex = listHeight.length -2
61 
62       },
63 }

html代码：

1 <scroll class="listview"
2              :listenScroll="listenScroll"
3              @scroll="listenLeftScoll"
4               :probe-type="probeType"
5              :singerList="singerList"
6              ref="listview">