svelte 问题记录

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

<!-- 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" style="height:100px; background:#000;" />
<svelte:window on:scroll={loadData} />
<!-- 加载更多触发器 - end -->

loadTriggerTop 获取的值为 .loadTrigger 到 b 的容器顶部。

原因是，<svelte:window on:scroll={loadData}/>写在 b 组件上，所以 window 绑定在 b 上，获取的值和实际想要的不一样。

持续更新ing。。。