简单的左右联动
今天写了一个简单的左右联动
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>