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）當前窗口內(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 props傳Array/Object類型值,子組件報錯的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報錯的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue父子組件狀態(tài)同步的最佳方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章給大家介紹了vue3如何實現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue?檢測變化的注意事項，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
ESLint是一個QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié)
這篇文章主要介紹了vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue中van-picker的選項插槽的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue提供了豐富的API和組件，可以幫助開發(fā)者快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序，本文介紹了Vue如何實現(xiàn)分頁功能，包括數(shù)據(jù)的獲取、分頁器的實現(xiàn)和頁面的渲染2023-09-09
今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實例代碼給大家介紹100行代碼實現(xiàn)一個vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
本文詳細講解了Vuex和其使用方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03