左右联动（仿美团）

简单的左右联动

今天写了一个简单的左右联动

home页面代码

<div>
<div class="home-container">
        <div class="home-slider-left">
            <div v-for="(item,index) in sliderleft "
            :key="index"
            :class="courrent===index?'home-slider-left-item-active':'home-slider-left-item'"
            @click="onClick(index)"
            >
              {{item.cname}}
            </div>
        </div>
        <div class="home-slider-right"
          ref="right"
          @mousewheel="onMouse"
        >
        <Right v-for="(item,index) in sliderleft "
        :key="index"
        :item="item"
        ref="child"
         />
        </div>
      </div>
</div>

<script>
import "../css/home.css"
import Axios from "axios"
import Right from "../components/Right"

export default {
  name: 'Home',
  data(){
    return{
      sliderleft:[],
      courrent:0,
    }
  },
  components: {
    Right,
  },
  methods:{
    onClick(index){
      this.courrent= index
      var rightEle = this.$refs.child[this.courrent].$el
      rightEle.scrollIntoView({behavior: "smooth"})
      this.$refs.right.removeEventListener('scroll',this.handleScroll,true)
    },
    handleScroll(event){
      var scrolltop = event.target.scrollTop
      var rightRef = this.$refs.child
      for (let index = 0; index < rightRef.length; index++) {
        if(scrolltop >= rightRef[index].$el.offsetTop-20 && scrolltop <rightRef[index+1].$el.offsetTop){
          this.courrent = index
        }
      }
    },
    // 右侧滚动同步左侧
    onMouse(){
       this.$refs.right.addEventListener('scroll',this.handleScroll,true)
    }
  },
  //获取json数据
  mounted(){
    Axios.get("http://localhost:8080/category.json").then((resp)=>{
      // window.console.log(resp.data)
      this.sliderleft=resp.data.data.data
      // window.console.log(this.sliderleft)
    }).catch((error)=>{
      window.console.log(error)
    })
  },
}
</script>

right内容代码

<template>
    <div class="home-slider-right-item" >
        <div v-for="(item,index) in item.subcategories "
            :key="index"
            class="right-item"
            @click="onClick(item)"
            >
                <div class="right-item-image">
                  <img :src=item.scpic alt="">
                </div>
                <div class="right-item-title">{{item.subcname}}</div>
        </div>
    </div>
</template>
<script>
import '../css/home.css'
export default {
    props:{
        item:Object,
    },
    methods:{
    
    }
}
</script>
<style>

</style>