当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue左右侧联动滚动的实现代码

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

2019年06月04日  | 移动技术网IT编程  | 我要评论

雪花那个飘片尾曲,修真神偷第二部,吉付通

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

实现功能:

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

布局结构:

开源滚动库:

better-scroll.js

技术要点:

1.<scroll>是对紧邻的元素生效

如:

<scroll class='foods-wrapper'>
  <ul class=content>
   <li></li>
  </ul>
 </scroll>

初始化在<ul>元素上

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 时时监听滚动距离

需要在<scroll>中加以下参数

复制代码 代码如下:
<scroll class='foods-wrapper' :listenscroll=listenscroll :probetype = 'probetype' @scroll=scroll>

其中 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 h1 = itemheight[i]
    let h2 = itemheight[i + 1]
    if (-newy >= h1 && -newy < h2) {
     this.currentindex = i
     return
    }
   }
  }
 }

代码部分:

//左侧结构
 <scroll class='menu-wrapper'>
  <ul>
   <li 
    v-for='(item,index) in foodslist' 
    :key=index 
     class=item 
    :class="{active:currentindex === index}" 
    @click=selectmenu(index)
   >
    <span>{{item.name}}</span>
   </li>
  </ul>
 </scroll>


//右侧结构
 <scroll class='foods-wrapper' ref=foodswrapper :listenscroll=listenscroll :probetype = 'probetype' @scroll=scroll>
  <ul ref=foodsul> 
   <li v-for='(item,index) in foodslist' :key=index class=item ref=item :data-index=index>
    <div class=title><span class='title-name'>{{item.name}}</span><span>{{item.description}}</span></div>
    <ul>
     <li v-for='(food,i) in item.foods' :key=i class=food>
     //.........
     //略去右侧详情代码
     </li>
    </ul>
   </li>
  </ul>
 </scroll>

//js部分
<script>
import scroll from "base/scroll"
const h = 112
export default {
 data () {
  return {
   currentindex: 0,
   offset: 0,
   scrolly: -1
  }
 },
 created () {
  this.listenscroll = true
  this.probetype = 3
  this.itemheight = [0]
 },
 mounted () {
  this.$nexttick(() => {
   this._heightarr()
  }, 20);
 },
 methods: {
  selectmenu (index) {
   let height = 0
   this.currentindex = index

   for (let i = 0; i < index; i++) {
    height += this.$refs.item[i].offsetheight
   }

   let foodsele = this.$refs.foodsul.getelementsbyclassname('item')[index]
   this.$refs.foodswrapper.scrolltoelement(foodsele, 400)
   // this.$refs.foodswrapper.scrollto(0, -height)
   this.offset = height
  },
  scroll (position) {
   this.scrolly = position.y
  },
  _heightarr () {
   let h = 0
   let list = this.$refs.item
   list.foreach((item, i) => {
    h += list[i].clientheight
    this.itemheight.push(h)
   })
  }
 },
 watch: {
  scrolly (newy) {
   if (newy >= 0) this.currentindex = 0
   let itemheight = this.itemheight
   for (let i = 0; i < itemheight.length - 1; i++) {
    let h1 = itemheight[i]
    let h2 = itemheight[i + 1]
    if (-newy >= h1 && -newy < h2) {
     this.currentindex = i
     return
    }
   }
  }

 },
 components: {
  scroll
 }


}
</script>
//scroll.vue
<template>
 <div ref=wrapper>
  <slot></slot> 
 </div>
</template>

<script>
import bscroll from 'better-scroll'
export default {
 props: {
  probetype: {
   type: number,
   default: 1//* 1 滚动的时候会派发scroll事件，会截流。 * 2 滚动的时候实时派发scroll事件，不会截流。 * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
  },
  click: {
   type: boolean,
   default: true
  },
  scrollx: {
   type: boolean,
   default: false
  },
  data: {
   type: array,
   default: null
  },
  listenscroll: {
   type: boolean,
   default: false
  },

 },
 mounted () {
  this.$nexttick(() => {
   this.initscroll()
  }, 20)
 },
 methods: {
  initscroll () {
   if (!this.$refs.wrapper) return
   this.scroll = new bscroll(this.$refs.wrapper, {
    probetype: this.probetype,
    click: this.click,
    scrollx: this.scrollx
   })

   if (this.listenscroll) {
    let me = this
    this.scroll.on('scroll', (position) => {
     me.$emit('scroll', position)

    })
   }
  },
  enable () {
   this.scroll && this.scroll.enable()
  },
  disable () {
   this.scroll && this.scroll.disable()
  },
  refresh () {
   this.scroll && this.scroll.refresh()
  },
  scrollto () {
   this.scroll && this.scroll.scrollto.apply(this.scroll, arguments)
  },

  scrolltoelement () {
   this.scroll && this.scroll.scrolltoelement.apply(this.scroll, arguments)
  }

 },
 watch: {
  data () {
   settimeout(() => {
    this.scroll.refresh()
   }, 20)
  }
 }

}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网