vue 純js監(jiān)聽滾動條到底部的實例講解
更新時間：2018年09月03日 15:44:55 作者：ColourfulTiger
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動條到底部的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在網(wǎng)頁中，我們會遇到很多在滾動條到底部的時候有數(shù)據(jù)正在加載的事件，那么怎樣用vue去實現(xiàn)這樣的內(nèi)容呢？本篇只給出一個雛形，結(jié)合vue的生命周期用純javascript寫的一個監(jiān)聽函數(shù)，后續(xù)操作數(shù)據(jù)庫的部分暫且不議。
1、怎樣用純js判斷滾動條是否到底部？
先了解幾個關(guān)鍵詞：
（1）滾動條到頂部的位置：scrollTop
（2）當(dāng)前窗口內(nèi)容可視區(qū)：windowHeight
（3）滾動條內(nèi)容的總高度：scrollHeight
觸發(fā)監(jiān)聽的函數(shù)是：
window.onscroll = function()｛...｝
判斷到底部的等式: scrollTop+windowHeight=scrollHeight;
2、主要函數(shù)代碼
created(){
window.onscroll = function(){
//變量scrollTop是滾動條滾動時，距離頂部的距離
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//變量windowHeight是可視區(qū)的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//變量scrollHeight是滾動條的總高度
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滾動條到底部的條件
if(scrollTop+windowHeight==scrollHeight){
//寫后臺加載數(shù)據(jù)的函數(shù)
console.log("距頂部"+scrollTop+"可視區(qū)高度"+windowHeight+"滾動條總高度"+scrollHeight);
}
}
}
以上這篇vue 純js監(jiān)聽滾動條到底部的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Element-ui表單resetFields無法重置問題
本文主要介紹了Vue+Element-ui表單resetFields無法重置問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個頁面劃分成一個個小的模塊，每個模塊單獨定義，每個模塊就是一個組件。組件可以進行復(fù)用，A頁面和B頁面有一個相似的模塊，可以抽離成一個可局部修改的組件。2021-05-05
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
本篇文章主要介紹了Vue中如何實現(xiàn)輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在正式使用Vue進行移動端頁面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)移動端h5環(huán)境搭建的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue-cli4使用全局less文件中的變量配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue指令，Vue官網(wǎng)一共有提供了14個指令，下面我們就來詳細講解每一個指令的詳細內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了vue父組件觸發(fā)事件改變子組件的值的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
vue?this.$router.go(-1);返回時如何帶參數(shù)
這篇文章主要介紹了vue?this.$router.go(-1);返回時如何帶參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12