vue左右侧联动滚动的实现代码

本文介绍了vue左右侧联动滚动的实现代码，分享给大家，具体如下：

实现功能:

1. 点击左侧,右侧滚动到相应位置,
2. 滚动右侧, 左侧滚动到相应位置

布局结构:

开源滚动库:

 better-scroll.js

技术要点:

1.是对紧邻的元素生效

如:

初始化在

元素上

2.foods-wrapper的高度小于content高度时才会发生滚动

3.点击左侧菜单列表时,只需要计算右侧对应的偏移距离 或是 计算对应的移动到的元素即可


方法一: 计算移动距离, 用scrollTo()方法

 for (let i = 0; i 

方法二: 计算移动到的元素,用scrollToElement()方法

 let foodsEle = this.$refs.foodsUl.getElementsByClassName('item')[index] this.$refs.foodsWrapper.scrollToElement(foodsEle, 400)

4.滚动右侧列表时,会稍复杂一些.

4.1. 因为需要知道滚动的元素在哪个item列表区间, 因此需要计算右侧五组item距离顶部的距离

 _heightArr () { let h = 0 let list = this.$refs.item list.forEach((item, i) => { h += list[i].clientHeight this.itemHeight.push(h) }) console.log(this.itemHeight) //[0, 481, 850, 2227, 2820, 3189] }

4.2 时时监听滚动距离

需要在中加以下参数


复制代码 代码如下:

其中 listenScroll probeType参数 在created中定义:

 created () { this.listenScroll = true this.probeType = 3 }

而@scroll=scroll是在scroll.vue中代理过来的方法:

 //scroll.vue if (this.listenScroll) { let me = this this.scroll.on('scroll', (position) => { me.$emit('scroll', position) //参数position: position:{x:-10, y:24} }) }

posiiton.y就是需要实时监听的参数,即:

 scroll (position) { this.scrolly = position.y }

其中 scrolly 需要在data中提前定义:

 data () { return { scrolly: -1 } }

然后在watch中监听scrolly变化即可:

 watch: { scrolly (newy) { if (newy >= 0) this.currentIndex = 0 let itemHeight = this.itemHeight for (let i = 0; i = h1 && -newy 

代码部分:

 //左侧结构  
 
 {{item.name}} //右侧结构  
 
 
{{item.name}}{{item.description}}
 
 //......... //略去右侧详情代码  //js部分 

 //scroll.vue