怎么在vue中利用@scroll監聽滾動事件

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

在.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)
  },
 }
}

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

經過仔細思考，猜想應該是滾動事件并不是在我<div class="body-container" @scroll="scrollEvent">這個div上觸發的，因為滾動條并沒有出現在我這個div上。這個div完全被li標簽撐起來了，產生滾動事件的就是document了。

于是做了一個小試驗，定義一個固定高度的div

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

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

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

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

當然后辦法啦！就是吧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
}

因為上下左右的位置都固定了，所以div自然也就有了固定高度，此方法適用于頁面有一個固定高度的頭部導航，我項目中有一個6rem高的頭部導航，所以我采用了fixed定位。

接下來就是驗證是否滑到了底部

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

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

methods: {
  scroll(e){
  // !this.moreLoading 沒有在加載狀態，觸發加載更多時，把this.moreLoading置未true
  // !this.noMore 沒有更多的狀態為false，當我們取到的數據長度小于1頁的數量時，就沒有更多了數據了，把 this.noMore置為true，這樣就不會觸發無意義的加載更多了
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
   this.loadMore();
  }
  },
 }

以上就是怎么在vue中利用@scroll監聽滾動事件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。