快捷導(dǎo)航

vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無效問題的解決方法詳解

更新時(shí)間：2019年10月15日 09:53:28 作者：李小白1

這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無效問題的解決方法,結(jié)合實(shí)例形式分析了@scroll監(jiān)聽滾動(dòng)事件無效問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下

本文實(shí)例講述了vue使用@scroll監(jiān)聽滾動(dòng)事件時(shí)，@scroll無效問題的解決方法。分享給大家供大家參考，具體如下：

在網(wǎng)上看了一下vue中監(jiān)聽滾動(dòng)條滾動(dòng)事件，清一色的使用document.addEventListener('scroll',function(){})

我是在做滾動(dòng)條滑到底部時(shí)，自動(dòng)加載更多的時(shí)候有這個(gè)需求。

我認(rèn)為使用document.addEventListener會(huì)破壞vue的統(tǒng)一性，對(duì)我這種有輕微代碼強(qiáng)迫癥的人來說，讓我感覺很不爽。而且這種做法，會(huì)讓你更加難以判斷是否滑動(dòng)到底部了，特別是當(dāng)你并不是整頁滾動(dòng)，而是頁面中擁有一個(gè)fixed固定的頭部時(shí)。

在.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)簽足夠多，撐滿一頁，頁面滾動(dòng)的時(shí)候并不能觸發(fā)到scrollEvent，是什么原因呢？

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

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

<div style="height: 300px" @scroll="scrollEvent">
 <div style="height: 200px"></div>
 <div style="height: 200px"></div>
 <div style="height: 200px"></div>
</div>

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

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

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

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

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

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

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

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

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

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

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

至此，功能完美的實(shí)現(xiàn)了，而且沒有使用document.addEventListener破壞vue的完整性，感覺自己棒棒噠！

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: