辽源市建设局网站市场调研的五个步骤

场景

后端一股脑给了几千个数据，我们滚动过程永远只渲染20条

原理

滚动到底时候获取裁剪位置，的到需要渲染的20条数据，通过vue diff算法更新到dom

代码

<template><div class="container" @scroll="handleScroll"><div v-if="showRefreshHint" class="refresh-hint">下拉刷新...</div><ul><li v-for="(item, index) in visibleItems" :key="index" class="item">{{ item }}</li></ul><div v-if="loadingMore" class="loading">加载中...</div></div>
</template><script>
export default {data() {return {longArray: Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`), // 长数组visibleCount: 20, // 当前可见的条目数loadingMore: false, // 是否正在加载更多showRefreshHint: false, // 是否显示刷新提示lastScrollTop: 0, // 上一次的滚动位置};},computed: {visibleItems() {return this.longArray.slice(0, this.visibleCount);},},methods: {handleScroll(event) {const container = event.target;const { scrollTop, scrollHeight, clientHeight } = container;// 判断是否滚动到底部if (scrollTop + clientHeight >= scrollHeight - 10) {this.loadMore();}// 判断是否滚动到顶部if (scrollTop <= 0) {this.showRefreshHint = true;this.refreshData();} else {this.showRefreshHint = false;}// 保存当前滚动位置this.lastScrollTop = scrollTop;},loadMore() {if (this.loadingMore) return; // 防止重复加载// this.loadingMore = true;// 模拟异步加载// setTimeout(() => {this.visibleCount += 20; // 每次加载更多条目this.loadingMore = false;//}, 1000);},refreshData() {// 模拟刷新数据// setTimeout(() => {this.visibleCount = 20; // 重置可见条目数this.showRefreshHint = false; // 隐藏刷新提示// }, 1000);},},
};
</script><style>
.container {height: 100vh;overflow-y: auto;position: relative;background:#f3f2f2;
}
ul{padding:0;
}
.refresh-hint {text-align: center;padding: 10px;background-color: #f0f0f0;position: sticky;top: 0;z-index: 10;
}
.loading {text-align: center;padding: 10px;background-color: #f0f0f0;
}
.item {height: 60px;display: flex;align-items: center;padding: 0 10px;background:#fff;
}
.item +.item{margin-top:10px;
}
</style>

在线地址：

Vue SFC Playground