Vue組件實(shí)現(xiàn)觸底判斷

更新時(shí)間：2019年06月26日 11:26:01 作者：Sallywa

這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)觸底判斷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue組件實(shí)現(xiàn)觸底判斷的具體代碼，供大家參考，具體內(nèi)容如下

非常簡(jiǎn)陋的代碼，以后有空回來完善

子組件代碼：

<template>
 <div class="scroll"></div>
</template>
 
<script>
 export default {
 name:'Scroll',
 methods:{
 scrollEvent(){
 if (document.documentElement.scrollTop
      + document.documentElement.clientHeight 
     >= document.body.scrollHeight) {
  this.onBottom();
 }
 }
 },
 props:{
 onBottom:Function
 },
 mounted(){
 window.addEventListener('scroll', this.scrollEvent,false);
 },
 destroyed () {
   window.removeEventListener('scroll', this.scrollEvent,false);
  }
 }
</script>

document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeightb表示已經(jīng)到頁(yè)面底部了，那么就觸發(fā)函數(shù)onBottom，函數(shù)onBottom是父組件傳遞過來的用于回調(diào)的函數(shù)

父組件代碼：

把子組件scroll放在父組件的底部（切記，不然函數(shù)不起作用），用作觸底判斷。

<template>
 <div class="wrap">
 <scroll :onBottom = "onBottom"></scroll>
 </div>
</template>
 
<script>
 import Scroll from '@/components/scroll'
 export default {
 name: 'roll',
 components:{
 Scroll,
 },
 methods:{
 onBottom(){
  console.log('bottom')
 }
 }
 }
</script>
<style type="text/css" lang="stylus" scoped>
 .wrap{
 height: 1000px;
 background: grey;
 width: 100%;
 }
</style>

父子傳值也可以傳遞data里面的函數(shù)。這里我的回調(diào)函數(shù)里面進(jìn)行的操作是到底部后console出bottom

效果：

可以看到觸發(fā)頻次比較高，其實(shí)子組件里面應(yīng)該加一個(gè)函數(shù)節(jié)流函數(shù)，限制觸發(fā)頻率。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)
防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關(guān)于vue3封裝AES(CryptoJS)前端加密解密通信代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2023-12-12
vue3?Table分頁(yè)保留選中狀態(tài)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁(yè)保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁(yè)和選中功能,需要的朋友可以參考下
2023-08-08
Vue中實(shí)現(xiàn)動(dòng)態(tài)右鍵菜單的示例代碼
在前端開發(fā)中,實(shí)現(xiàn)自定義右鍵菜單能夠?yàn)橛脩籼峁└喙δ苓x項(xiàng),本文就來介紹了Vue中實(shí)現(xiàn)動(dòng)態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下
2024-11-11
vue使用webSocket更新實(shí)時(shí)天氣的方法
本文將結(jié)合實(shí)例代碼，介紹vue使用webSocket更新實(shí)時(shí)天氣的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue單頁(yè)緩存存在的問題及解決方案(小結(jié))
這篇文章主要介紹了vue單頁(yè)緩存存在的問題及解決方案(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
淺談vue中慎用style的scoped屬性
本篇文章主要介紹了淺談vue中慎用style的scoped屬性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue遞歸獲取父元素的元素實(shí)例
這篇文章主要介紹了vue遞歸獲取父元素的元素實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問題
這篇文章主要介紹了解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁(yè)切換
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁(yè)的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06