vue實現(xiàn)純前端表格滾動分頁加載

更新時間：2022年04月11日 12:05:56 作者：Cardhu丶

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)純前端表格滾動分頁加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: