使用better-scroll插件进行左右联动布局效果

npm install better-scroll -S

updated() {
    if (!this.scroll) {
      this.$nextTick(() => {
    this.scroll = new BetterScroll(this.$refs.right, {
      click: true,
      probeType: 3,
    // pullUpload:true上拉加载更多
    });
    // 滚动事件
    this.scroll.on("scroll", (pos) => {
      console.log(pos);
      this.scrollY = Math.abs(pos.y);
      console.log(this.scrollY);
    });
        this.leftClick();
        console.log(this.scroll);
      });
    } 
  },
methods:{
    leftClick() {
      let uls = this.$refs.right.getElementsByClassName("li");
      console.log(uls);
      let height = 0;
      this.allHeight.push(height);
      Array.from(uls).forEach((v) => {
        height += v.clientHeight;
        //  console.log(v.clientHeight);
        this.allHeight.push(height);
      });
    },
    onChange(index) {
      console.log(this.allHeight[index]);
      this.scroll.scrollTo(0, -this.allHeight[index], 300);
      // ul.scrollTop = this.allHeight[index] + 10;
    },
    }
computed: {
      current(){
        console.log(111);
        return this.allHeight.findIndex((item,index)=>{
          console.log(item,index);
          // 滚动距离 
          // 1500>= 1400 && 1500< 2100
          return this.scrollY >= item && this.scrollY <this.allHeight[index + 1]
        })
      }
    },

<li
            v-for="(item, index) in list"
            @click="onChange(index)"
            :key="index"
            :class="{lis_one_color:index == current}"
            class="lis_one "
          >

.lis_one{
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  /* width: 100%; */
  height: 50px;
  line-height: 36px;
  margin: 10px 0;
  padding: 7px 0;
  box-sizing: border-box;
}
.lis_one_color{
    color: rgb(255,102,0) ;
    border-left:3px rgb(255,102,0) solid;
}

import BetterScroll from "better-scroll";

click:true,
probeType:3

updated() {
    if (!this.scroll) {
      this.$nextTick(() => {
    this.scroll = new BetterScroll(this.$refs.right, {
      click: true,
      probeType: 3,
    });
    } 
  },

this.scroll.on("scroll", (pos) => {
      console.log(pos);
      this.scrollY = Math.abs(pos.y);
      console.log(this.scrollY)
    });

  computed: {
      current(){
        return this.allHeight.findIndex((item,index)=>{
          console.log(item,index);
        })
      }
    },