通過(guò)原生vue添加滾動(dòng)加載更多功能

更新時(shí)間：2019年11月21日 11:40:23 作者：木子沐沐

這篇文章主要介紹了通過(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)文章

Vue 2.0入門基礎(chǔ)知識(shí)之內(nèi)部指令詳解
這篇文章主要介紹了Vue 2.0入門基礎(chǔ)知識(shí)之內(nèi)部指令知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
2017-10-10
使用vue-element-admin框架從后端動(dòng)態(tài)獲取菜單功能的實(shí)現(xiàn)
 vue-element-admin是一個(gè)純前端的框架，左側(cè)菜單是根據(jù)路由生成的。實(shí)際開(kāi)發(fā)中經(jīng)常需要根據(jù)當(dāng)前登陸人員的信息從后端獲取菜單進(jìn)行展示，本文將詳細(xì)介紹如何實(shí)現(xiàn)該功能
2021-04-04
vue中如何簡(jiǎn)單封裝axios淺析
Axios 毋庸多說(shuō)大家在前端開(kāi)發(fā)中常用的一個(gè)發(fā)送 HTTP 請(qǐng)求的庫(kù)，用過(guò)的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡(jiǎn)單封裝axios的相關(guān)資料,需要的朋友可以參考下
2021-06-06
vue.js動(dòng)態(tài)修改background-image問(wèn)題
這篇文章主要介紹了vue.js動(dòng)態(tài)修改background-image問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
element-ui圖像組件、上傳組件以及分頁(yè)組件實(shí)現(xiàn)代碼
工作中碰到需要多圖上傳,在使用element-ui解決過(guò)程中碰到一些問(wèn)題,在這里分享給大家,這篇文章主要給大家介紹了關(guān)于element-ui圖像組件、上傳組件以及分頁(yè)組件實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-02-02
學(xué)習(xí)vue.js表單控件綁定操作
這篇文章主要和大家一起學(xué)習(xí)vue.js表單控件綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實(shí)現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue中使用vue-qriously插件生成二維碼
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會(huì)滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧
2022-04-04
bmob js-sdk 在vue中的使用教程
將bmob js-sdk放在static目錄，然后在index.html頁(yè)面中已 script 標(biāo)簽的形式引入，就可以在vue中全局使用bmob js-sdk。下面通過(guò)本文給大家分享bmob js-sdk 在vue中的使用教程，需要的朋友參考下吧
2018-01-01
VUE對(duì)接deepseekAPI調(diào)用方式
文章介紹了如何在Vue項(xiàng)目中對(duì)接DeepSeek API,包括在開(kāi)放平臺(tái)注冊(cè)賬號(hào)申請(qǐng)APIKey、安裝axios庫(kù)、創(chuàng)建API調(diào)用函數(shù)以及在Vue組件中調(diào)用該函數(shù)
2025-01-01