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

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

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站设计、固镇网络推广、微信平台小程序开发、固镇网络营销、固镇企业策划、固镇品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供固镇建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

实现功能:

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

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

布局结构:

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

开源滚动库:

better-scroll.js

技术要点:

1.是对紧邻的元素生效

如:

初始化在

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

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

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

 for (let i = 0; i < index; i++) {
  height += this.$refs.item[i].offsetHeight
 }
 this.$refs.foodsWrapper.scrollTo(0, -height)

方法二: 计算移动到的元素,用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 < itemHeight.length - 1; i++) {
    let h2 = itemHeight[i]
    let h3 = itemHeight[i + 1]
    if (-newy >= h2 && -newy < h3) {
     this.currentIndex = i
     return
    }
   }
  }
 }

代码部分:

//左侧结构
 
  
   
    {{item.name}}
   
  
 


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

//js部分

//scroll.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

http://kswsj.cn/article/iedchs.html

关于创新互联

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

其他资讯