vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解
更新時(shí)間：2018年09月03日 15:44:55 作者：ColourfulTiger
今天小編就為大家分享一篇vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在網(wǎng)頁中，我們會(huì)遇到很多在滾動(dòng)條到底部的時(shí)候有數(shù)據(jù)正在加載的事件，那么怎樣用vue去實(shí)現(xiàn)這樣的內(nèi)容呢？本篇只給出一個(gè)雛形，結(jié)合vue的生命周期用純javascript寫的一個(gè)監(jiān)聽函數(shù)，后續(xù)操作數(shù)據(jù)庫的部分暫且不議。
1、怎樣用純js判斷滾動(dòng)條是否到底部？
先了解幾個(gè)關(guān)鍵詞：
（1）滾動(dòng)條到頂部的位置：scrollTop
（2）當(dāng)前窗口內(nèi)容可視區(qū)：windowHeight
（3）滾動(dòng)條內(nèi)容的總高度：scrollHeight
觸發(fā)監(jiān)聽的函數(shù)是：
window.onscroll = function()｛...｝
判斷到底部的等式: scrollTop+windowHeight=scrollHeight;
2、主要函數(shù)代碼
created(){
window.onscroll = function(){
//變量scrollTop是滾動(dòng)條滾動(dòng)時(shí)，距離頂部的距離
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//變量windowHeight是可視區(qū)的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//變量scrollHeight是滾動(dòng)條的總高度
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滾動(dòng)條到底部的條件
if(scrollTop+windowHeight==scrollHeight){
//寫后臺(tái)加載數(shù)據(jù)的函數(shù)
console.log("距頂部"+scrollTop+"可視區(qū)高度"+windowHeight+"滾動(dòng)條總高度"+scrollHeight);
}
}
}
以上這篇vue 純js監(jiān)聽滾動(dòng)條到底部的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue父子組件狀態(tài)同步的最佳方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue3實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue?檢測變化的注意事項(xiàng)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
ESLint是一個(gè)QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié)
這篇文章主要介紹了vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue中van-picker的選項(xiàng)插槽的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue提供了豐富的API和組件，可以幫助開發(fā)者快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序，本文介紹了Vue如何實(shí)現(xiàn)分頁功能，包括數(shù)據(jù)的獲取、分頁器的實(shí)現(xiàn)和頁面的渲染2023-09-09
100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能
今天用vue來實(shí)現(xiàn)一個(gè)分頁組件，總體來說，vue實(shí)現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
本文詳細(xì)講解了Vuex和其使用方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03