通過(guò)原生vue添加滾動(dòng)加載更多功能
更新時(shí)間：2019年11月21日 11:40:23 作者：木子沐沐
這篇文章主要介紹了通過(guò)原生vue添加滾動(dòng)加載更多功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了通過(guò)原生vue添加滾動(dòng)加載更多功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
vue中添加滾動(dòng)加載更多，因?yàn)槭菃雾?yè)面所以需要在跳出頁(yè)面時(shí)候銷毀滾動(dòng)，要不會(huì)出現(xiàn)錯(cuò)亂。我們?cè)趍ounted建立滾動(dòng)，destroyed銷毀滾動(dòng)。
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
定義一個(gè)函數(shù)，在滾動(dòng)到底部時(shí)候使?jié)L動(dòng)條距離頂部距離與可視區(qū)域高度之和等于滾動(dòng)條總高度，在加載后如果列表長(zhǎng)度為0時(shí)應(yīng)該停止加載，要不會(huì)出現(xiàn)一直加載的情況
handleScroll () {
//變量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 &&this.list.length !==0){
this.loadMore() // 加載的列表數(shù)據(jù)
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Nuxt的路由配置和參數(shù)傳遞方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
詳解如何配置vue-cli3.0的vue.config.js
這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue引入sass并配置全局變量的方法2018-06-06
簡(jiǎn)單聊一聊axios配置請(qǐng)求頭content-type
最近在工作中碰到一個(gè)問(wèn)題,后端提供的get請(qǐng)求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇淺談Vue中render中的h箭頭函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了Vuex中State的使用方法,Vuex 使用單一狀態(tài)樹,用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài),這也意味著,每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了初試vue-cli使用HBuilderx打包app的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
element-plus中el-table點(diǎn)擊單行修改背景色方法
這篇文章主要給大家介紹了關(guān)于element-plus中el-table點(diǎn)擊單行修改背景色的相關(guān)資料,這是產(chǎn)品新加了的一個(gè)需求,分享給同樣遇到這個(gè)需求的朋友,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue render深入開發(fā)講解2018-04-04