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