本文介紹了vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼，分享給大家，具體如下：

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、固鎮(zhèn)網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、固鎮(zhèn)網(wǎng)絡(luò)營(yíng)銷、固鎮(zhèn)企業(yè)策劃、固鎮(zhèn)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供固鎮(zhèn)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

實(shí)現(xiàn)功能:

1. 點(diǎn)擊左側(cè),右側(cè)滾動(dòng)到相應(yīng)位置,
2. 滾動(dòng)右側(cè), 左側(cè)滾動(dòng)到相應(yīng)位置

布局結(jié)構(gòu):

開(kāi)源滾動(dòng)庫(kù):

better-scroll.js

技術(shù)要點(diǎn):

1.是對(duì)緊鄰的元素生效

如:

初始化在

元素上

2.foods-wrapper的高度小于content高度時(shí)才會(huì)發(fā)生滾動(dòng)

3.點(diǎn)擊左側(cè)菜單列表時(shí),只需要計(jì)算右側(cè)對(duì)應(yīng)的偏移距離 或是 計(jì)算對(duì)應(yīng)的移動(dòng)到的元素即可

方法一: 計(jì)算移動(dòng)距離, 用scrollTo()方法

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

方法二: 計(jì)算移動(dòng)到的元素,用scrollToElement()方法

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

4.滾動(dòng)右側(cè)列表時(shí),會(huì)稍復(fù)雜一些.

4.1. 因?yàn)樾枰罎L動(dòng)的元素在哪個(gè)item列表區(qū)間, 因此需要計(jì)算右側(cè)五組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 時(shí)時(shí)監(jiān)聽(tīng)滾動(dòng)距離

需要在中加以下參數(shù)

復(fù)制代碼 代碼如下:

其中 listenScroll probeType參數(shù) 在created中定義:

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

而@scroll=scroll是在scroll.vue中代理過(guò)來(lái)的方法:

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

posiiton.y就是需要實(shí)時(shí)監(jiān)聽(tīng)的參數(shù),即:

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

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

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

然后在watch中監(jiān)聽(tīng)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
    }
   }
  }
 }

代碼部分:

//左側(cè)結(jié)構(gòu)
 
  

   

    {{item.name}}
   
  
 


//右側(cè)結(jié)構(gòu)
 
  
 
   

    
{{item.name}}{{item.description}}
    

     

     //.........
     //略去右側(cè)詳情代碼
     
    
   
  
 

//js部分

//scroll.vue

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。


文章名稱：vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼
文章源于：http://weahome.cn/article/iedchs.html