左右实现滑动

左右实现滑动

home页面：
<template>
  <div class="home">
    <!-- 左边 -->
    <div class="home_left">
      <div v-for="(item, index) in list" :key="index" 
           :class="[{left_item_active:currentIndex === index},'left_item']" @click="onClick(index)">
        {{item.anchor_point}}
      </div>
    </div>
    <!-- 右边 -->
    <div class="home_right" @mousewheel="onMouse" ref="right">
      <Child v-for="(item, index) in list" 
            :key="index" 
            :item="item"
            ref="child"
            />
     
    </div>
  </div>
</template>

<script>
import axios from "axios"
import Child from "../components/Child"

export default {
  name: 'Home',
  components: {
   Child
  },
  data() {
    return {
      list:[],
      currentIndex:0
    }
  },
  methods: {
    // 点击左边---右边有滚动的过渡动画
    onClick(index){
      this.currentIndex = index
      var rightEle = this.$refs.child[this.currentIndex].$el
      // rightEle.scrollIntoView()
      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循环子元素的长度 进行判断
      for (let index = 0; index < rightRef.length; index++) {
        if(scrolltop >= rightRef[index].$el.offsetTop-20 && scrolltop <rightRef[index+1].$el.offsetTop){
          this.currentIndex = index
        }
        
      }
    },
    // 鼠标滚轮上下移动，一级导航联动
    onMouse(){
       this.$refs.right.addEventListener('scroll',this.handleScroll,true)
    }
  },
  mounted(){
    axios.get("http://localhost:8080/shoppingList.json").then((response)=>{
      window.console.log(response.data)
      this.list = response.data
    }).catch((error)=>{
      window.console.log(error)
    })
  }
}
</script>
<style scoped>
.home
{
  width: 100%;
  display:flex;
}
/* 左边的 */
.home_left
{
  width: 30%;
  height: 667px;
  background-color: #efefef;
}
.left_item
{
  width: 100%;
  height: 60px;
  display:flex;
  justify-content:flex-start;
  align-items: center;
}
.left_item_active
{
  background-color: #fff;
  color:brown;
}
/* 右边的 */
.home_right
{
  width: 70%;
  height: 667px;
  overflow: scroll;
  /* scroll 的过渡动画效果 */
  scroll-behavior:smooth;
}

</style>

<template>
  <div>
    <div class="right_container">
        <div class="item_title">{{item.anchor_point}}</div>

           <div v-for="(i, j) in item.commodity_list" :key="j" class="item_content">
            <div class="image"><img :src="i.comm_image" alt=""></div>
            <div class="title">{{i.comm_title}}</div>
          </div>

      </div>
  </div>
</template>

<script>
  export default {
    props:{
      item:Object
    }
  }
</script>

<style  scoped>
.item_title
{
  width: 80%;
  height: 50px;
  font-size:20px;
  font-weight: bold;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
}
.right_container
{
  width: 100%;
  display:flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.item_content
{
  width: 50%;
  height: 150px;
  display:flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom:5px ;
}
.image
{
  width: 100%;
  height: 100px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.image img
{
  width: 90%;
}
.title
{
  font-size:14px;
}
</style>

但是呢有点小bug，如果有大神看到这篇文章的话，可以在评论中教一下