Vue組件實(shí)現(xiàn)觸底判斷
本文實(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)到頁面底部了，那么就觸發(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)文章
這篇文章主要介紹了如何抽象一個(gè)Vue公共組件，以一個(gè)數(shù)字鍵盤組件為例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)波譜擬合的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
axios發(fā)送post請(qǐng)求springMVC接收不到參數(shù)的解決方法
下面小編就為大家分享一篇axios發(fā)送post請(qǐng)求springMVC接收不到參數(shù)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
優(yōu)化Vue項(xiàng)目編譯文件大小的方法步驟
這篇文章主要介紹了優(yōu)化Vue項(xiàng)目編譯文件大小的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略
這篇文章主要介紹了vue實(shí)現(xiàn)移動(dòng)端項(xiàng)目多行文本溢出省略功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
nuxt框架中路由鑒權(quán)之Koa和Session的用法
后臺(tái)管理頁面需要有登錄系統(tǒng)，所以考慮做一下路由鑒權(quán)，這篇文章主要介紹了nuxt框架中路由鑒權(quán)之Koa和Session的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue 搭建后臺(tái)系統(tǒng)模塊化開發(fā)詳解
這篇文章主要介紹了vue 搭建后臺(tái)系統(tǒng)模塊化開發(fā)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列
這篇文章主要為大家詳細(xì)介紹了vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08