vue實現(xiàn)純前端表格滾動分頁加載
本文實例為大家分享了vue實現(xiàn)表格滾動分頁加載的具體代碼,供大家參考,具體內(nèi)容如下
實現(xiàn)效果
實現(xiàn)過程
<div ? ? style="width: 100%; overflow: hidden; position: relative" ? ? id="container" ? ? ref="container" ? ? @mousewheel="handleScroll" ? ? :style="{ height: pageHeight + 'px' }"> ? <!-- ? ?表格--> ? <div class="loading-bottom" v-show="visibleLoading"> ? ? ? <a-spin :spinning="visibleLoading" style="margin-right: 10px"></a-spin>正在加載數(shù)據(jù) ? ? </div> </div>
js
data() { ? return { ? ? visibleLoading: false, ? } }, mounted() { ? //ref指向?qū)?yīng)div,不建議對window全局監(jiān)聽,會影響子div的滾動 ? this.$refs.container.addEventListener('scroll', this.handleScroll); }, beforeUnmount() { ? this.$refs.container.removeEventListener('scroll', this.handleScroll); }, methods:{ ? //滾輪監(jiān)聽 ? handleScroll() { ? ? let listAllHeight = ? ? ? document.documentElement.scrollTop || ? ? ? document.body.scrollTop + document.documentElement.scrollHeight || ? ? ? document.body.scrollHeight; ? ? let containerHeight = document.querySelector('#container').scrollHeight; ? ? //46 + 62 + 75是表格距離頁面頂部的剩余距離,跟個人布局有關(guān) ? ? let fieldHeight = document.querySelector('#left-field').scrollHeight + 46 + 62 + 75; ? ? if ( ? ? ? (fieldHeight >= containerHeight && this.pageHeight !== fieldHeight) || ? ? ? (containerHeight > fieldHeight && this.pageHeight !== containerHeight) ? ? ) { ? ? ? this.visibleLoading = true; ? ? } ? ? setTimeout(() => { ? ? ? if (listAllHeight === this.pageHeight && this.pageHeight < containerHeight) { ? ? ? ? this.pageHeight = this.pageHeight + 750; ? ? ? } ? ? ? if (this.pageHeight > containerHeight && containerHeight > fieldHeight) { ? ? ? ? this.pageHeight = containerHeight; ? ? ? } ? ? ? if (this.pageHeight > fieldHeight && fieldHeight >= containerHeight) { ? ? ? ? this.pageHeight = fieldHeight; ? ? ? } ? ? ? this.visibleLoading = false; ? ? }, 500); ? }, }
css
.loading-bottom { ? position: absolute; ? left: 255px; ? bottom: 0; ? height: 30px; ? padding: 5px 0; ? background-color: #d3dae6; ? width: calc(100% - 270px); ? text-align: center; ? font-size: 14px; ? font-weight: 500; ? border-radius: 2px; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue如何使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-02-02vue實現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能示例
這篇文章主要介紹了vue實現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能,涉及vue.js表單事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題
今天小編就為大家分享一篇解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue中video標(biāo)簽如何實現(xiàn)不靜音自動播放
最近在做大屏展示需要在一開始播放引導(dǎo)視頻,產(chǎn)生自動播放需求,下面這篇文章主要給大家介紹了關(guān)于Vue中video標(biāo)簽如何實現(xiàn)不靜音自動播放的相關(guān)資料,需要的朋友可以參考下2023-01-01