滚动加载指令

vue 指令 官方文档 (opens new window)，在阅读本文档前，请对该方法的使用有一定了解。

该指令使用 element-ui 的 InfiniteScroll 无限滚动 (opens new window)指令二次开发而来

目录结构

└─ src                          # 项目主文件
   └─ directive                 # 指令
      └─ infinite-scroll        # 滚动指令
         ├─ index.js            # 注册指令
         └─ infinite-scroll.js  # 定义指令

新增代码

与 element-ui 的 InfiniteScroll 指令相比，在指令注册时，判断当前是否为弹出的 子页面，如评论页面，如果是子页面，则等到页面弹出动画结束后，获取内容区域高度赋值给滚动区域元素。

const elClassName = vnode.context.$el.className;
if (elClassName && elClassName.includes('page') || el.getAttribute('is-fixed') === "") {
	el.style.overflow = "auto";

	// 页面加载动画结束后再获取
	setTimeout(() => {
		const curElTop = el.getBoundingClientRect().top
		const pageFooterH = document.querySelector('.page-footer')?.getBoundingClientRect().height || 0

		el.style.height = `calc(100vh - ${curElTop + pageFooterH + 1}px )`;
	}, 300);
}