IntersectionObserver实现滚动加载

加载模板及样式：

.template
	<div class="lazy-more" v-show="newsList.length !== 0">
	  <van-loading size="14px">您好，精彩数据准备中...</van-loading>
	</div>
.style
	.lazy-more {
	  display: flex;
	  justify-content: center;
	  padding: 10px;
	  background: #f4f4f4;
	}
1
2
3
4
5
6
7
8
9
10
11

若将此div元素放入div.v-else块内，则第一次渲染页面时无此DOM元素，第一次数据绑定完后才有此DOM元素。
将此div元素拿出div.v-else块，则第一次渲染存在此DOM元素，但骨架屏和loading加载同时存在，影响美观。
所以加上 v-show=“newsList.length !== 0” ，既存在DOM元素，避免了下面的错误，又不影响美观。

获取DOM元素：

import ref.
let loadingMore=ref(null).
return{loadingMore}.
loadingMore绑定给所监听DOM的ref属性。
  <div class="lazy-more" v-show="newsList.length !== 0" ref="loadingMore">
此时js里可以通过laodingMore.value拿到DOM元素：
	console.log(loadingMore.value)
1
2
3
4
5
6
7

Intersection Observer：

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。它会注册一个回调函数，每当被监视的元素进入或者退出另外一个元素时 (或者 viewport )，或者两个元素的相交部分大小发生变化时，该回调方法会被触发执行。这样，我们网站的主线程不需要再为了监听元素相交而辛苦劳作，浏览器会自行优化元素相交管理。
注意 Intersection Observer API 无法提供重叠的像素个数或者具体哪个像素重叠，他的更常见的使用方式是——当两个元素相交比例在 N% 左右时，触发回调，以执行某些逻辑。
下面这些情况都需要用到相交检测：
图片懒加载——当图片滚动到可见时才进行加载
内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
在用户看见某个区域时执行任务或播放动画

相关文档

.script
    onMounted(() => {
      let intersectionObserver = new IntersectionObserver(async (changes) => {
        let item = changes[0];
        if (item.isIntersecting) {
          let result = await api.queryNewsBefore(
            state.newsList[state.newsList.length - 1]["date"]
          );
          state.newsList.push(Object.freeze(result));
        }
      });
      intersectionObserver.observe(loadingMore.value);
    });
1
2
3
4
5
6
7
8
9
10
11
12
13

错误：Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

实际上，因为 document.querySelector 如果元素不存在就会返回 null ，而当 element 传递给 sectionObserver.observe() 时，如果 element 是 null ，就会抛出上述异常发生 Failed to execute ‘observe’ on ‘IntersectionObserver’: parameter 1 is not of type ‘Element’ ，所以请确保 document.querySelector 选择的元素必须存在。
解决链接