怎么在vue中利用@scroll監(jiān)聽滾動事件

本篇文章給大家分享的是有關(guān)怎么在vue中利用@scroll監(jiān)聽滾動事件，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

在.vue的組件中

<template>
 <div class="body-container" @scroll="scrollEvent">
 <ul>
 <li></li>
 ……
 <li></li>
 </ul>
 </div>
<template>

export default {
 name: 'demo',
 data () {
  return {
  msg: '',
  }
 },
 methods: {
  scrollEvent(e){
  console.log(e)
  },
 }
}

照上面的寫法，我發(fā)現(xiàn)即使我的li標(biāo)簽足夠多，撐滿一頁，頁面滾動的時候并不能觸發(fā)到scrollEvent，是什么原因呢？

經(jīng)過仔細(xì)思考，猜想應(yīng)該是滾動事件并不是在我<div class="body-container" @scroll="scrollEvent">這個div上觸發(fā)的，因?yàn)闈L動條并沒有出現(xiàn)在我這個div上。這個div完全被li標(biāo)簽撐起來了，產(chǎn)生滾動事件的就是document了。

于是做了一個小試驗(yàn)，定義一個固定高度的div

<div  @scroll="scrollEvent">
 <div ></div>
 <div ></div>
 <div ></div>
</div>

當(dāng)我在這個300px固定高度的div中滾動的時候，果然觸發(fā)了scrollEvent，問題原因找到了，接下來就是解決了。

只要我能讓<div class="body-container" @scroll="scrollEvent">擁有固定高度，就能觸發(fā)滾動事件了。

但是固定高度怎么給呢，各個廠商的手機(jī)屏幕高度都是不一樣的，總不能讓某些手機(jī)顯示不完全，或者底部留空白吧。

當(dāng)然后辦法啦！就是吧html,body,.body-container{height:100%}這樣，我的.body-container就能繼承到document的高度了；

還有另一個辦法，讓.body-container使用fixed定位

.body-container{
 position: fixed;
 top:6rem;
 left: 0;
 right:0;
 bottom: 0;
 overflow: auto
}

因?yàn)樯舷伦笥业奈恢枚脊潭耍詃iv自然也就有了固定高度，此方法適用于頁面有一個固定高度的頭部導(dǎo)航，我項(xiàng)目中有一個6rem高的頭部導(dǎo)航，所以我采用了fixed定位。

接下來就是驗(yàn)證是否滑到了底部

export default {
 name: 'demo',
 data () {
  return {
  msg: '',
  }
 },
 methods: {
  scroll(e){
  //滾動的像素+容器的高度>可滾動的總高度-100像素
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){
   this.loadMore(); //加載更多
  }
  },
 }
}

這樣就能比較清晰的判斷是否滾動到了底部。但是如果僅僅這樣寫，當(dāng)滾動到底部100px內(nèi)時，會觸發(fā)很多次加載更多，所以我們需要增加一些判斷條件

methods: {
  scroll(e){
  // !this.moreLoading 沒有在加載狀態(tài)，觸發(fā)加載更多時，把this.moreLoading置未true
  // !this.noMore 沒有更多的狀態(tài)為false，當(dāng)我們?nèi)〉降臄?shù)據(jù)長度小于1頁的數(shù)量時，就沒有更多了數(shù)據(jù)了，把 this.noMore置為true，這樣就不會觸發(fā)無意義的加載更多了
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
   this.loadMore();
  }
  },
 }

以上就是怎么在vue中利用@scroll監(jiān)聽滾動事件，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。