Vue組件實現(xiàn)觸底判斷
更新時間：2019年06月26日 11:26:01 作者：Sallywa
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)觸底判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue組件實現(xià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表示已經到頁面底部了，那么就觸發(fā)函數(shù)onBottom，函數(shù)onBottom是父組件傳遞過來的用于回調的函數(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ù)。這里我的回調函數(shù)里面進行的操作是到底部后console出bottom
效果：
可以看到觸發(fā)頻次比較高，其實子組件里面應該加一個函數(shù)節(jié)流函數(shù)，限制觸發(fā)頻率。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)
防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關于vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)的相關資料,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關于vue3?Table分頁保留選中狀態(tài)的相關資料,vue table組件是一個非常方便的表格組件,它可以幫助我們實現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
在前端開發(fā)中,實現(xiàn)自定義右鍵菜單能夠為用戶提供更多功能選項,本文就來介紹了Vue中實現(xiàn)動態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下2024-11-11
本文將結合實例代碼，介紹vue使用webSocket更新實時天氣的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue單頁緩存存在的問題及解決方案(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了淺談vue中慎用style的scoped屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue遞歸獲取父元素的元素實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題
這篇文章主要介紹了解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue實現(xiàn)點擊按鈕進行上下頁的切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06