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

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

網站建設哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網頁設計、網站建設、微信開發(fā)、微信小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(liá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ā)頻率。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當前文章：Vue組件實現(xiàn)觸底判斷
當前路徑：http://chinadenli.net/article32/isgepc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、虛擬主機、搜索引擎優(yōu)化、網站設計公司、微信小程序、企業(yè)建站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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