【JS】svelte 问题记录

Z时代
2024-01-10
分类：技术分享

滚动底部就触发加载的组件。

<!-- a.svelte -->
<script>
let loadFn = function(){
console.log('滚动到底部触发加载')
}
</script>
<b on:load={loadFn}></b>
<!-- b.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
// 初始化触发器对象   const dispatch = createEventDispatcher();
// 加载更多触发器 默认隐藏   let loadTriggerVisible = false;
// 加载更多触发器 事件   let loadData = function () {
if (!listData || listData.length == 0) {
return;
}
// 当前滚动条高度     let scrollTopVal =
document.body.scrollTop || document.documentElement.scrollTop;
// 触发器距离顶部的高度     let loadTriggerTop = document.getElementsByClassName("loadTrigger")[0]
.offsetTop;
if (loadTriggerTop - scrollTopVal - document.documentElement.clientHeight <= 10) {
dispatch("load");
}
};
</script>
<!-- 加载更多触发器 - start -->
<div class="loadTrigger" />
<svelte:window on:scroll={loadData} /><!-- 加载更多触发器 - end -->