Vue 楼层监听滚动高亮

楼层监听使用了better-scroll插件

<template>
    <div class="wrap">
        <ul class="left">
            <div class="center">
                <li
                    :class="{'active':index==selectIndex}"
                    @click="initRight(index)"
                    v-for="(item,index) in list"
                    :key="index"
                >{{item.categoryName}}</li>
            </div>
        </ul>
        <div class="right">
            <div class="content" ref="item">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <h4>{{item.categoryName}}</h4>
                    <dl v-for="(ite,idx) in item.spuList" :key="idx">
                        <dt>
                            <img :src="ite.littleImageUrl" alt="">
                        </dt>
                        <dd>
                            <p>{{ite.spuName}}</p>
                            <p>{{ite.originPrice}}</p>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      list: [],
      rightTopArr: [],
      scrollY:0
    };
  },
  created() {
    axios.get("getdata").then(res => {
      console.log(res.data.data.categoryList);
      this.list = res.data.data.categoryList;
    });
  },
  computed: {
    selectIndex() {
      return this.rightTopArr.findIndex((item, index) => {
         this.initLeft(index)
         return item >=this.scrollY
      });
    }
  },
  mounted() {
    this.initbscroll();
  },
  methods: {
    initbscroll() {
      this.scrollRight = new BScroll(".right", { click: true,probeType:3 });
      this.scrollLeft = new BScroll(".left", { click: true });
    },
    initRight(index) {
      let el = this.$refs.item.children[index];
      this.scrollRight.scrollToElement(el, -this.rightTopArr[index]);
    //   console.log(this.scrollY)
    },
    initLeft(index){
        let el=this.$refs.item.children[index];
        this.scrollLeft.scrollToElement(el,300,0,-450)
    }
  },
  watch: {
    //右边所有li的高度
    list() {
      this.$nextTick(() => {
        let top = 0, //;初始默认高度为0
          topArr = []; //所有d的 li 距离顶部高度的集合
        topArr.push(top);
        //获取所有的li
        let lis = [...this.$refs.item.children];
        lis.map(item => {
          top += item.clientHeight;
          topArr.push(top);
        });
        this.rightTopArr = topArr;
        console.log(this.rightTopArr);
      });
      //   实时监听滚动的高度
      this.scrollRight.on("scroll", pos => {
        this.scrollY = Math.abs(pos.y);
      });
    }
  }
};
</script>

<style>
.active {
  background: red;
}
</style>