原理
1.通过监听滚动区域DOM的scroll事件, 计算出触底
// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight
2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听
3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示
示例
https://codepen.io/klren0312/full/dybgayL
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
1、在项目的main.js里注册// 注册滚动条加载触发事件v-loadmore绑定
Vue.directive('loadmore', {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector(
'.el-select-dropdown .el-select-dropdown__wrap'
)
SELECTWRAP_DOM.addEventListener('scroll', function() {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
binding.value()
}
})
}
})
----------------------------------------------------
v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
scrollHeight 获取元素内容高度(只读)
scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
clientHeight 读取元素的可见高度(只读)
如果元素滚动到底, 下面等式返回true, 没有则返回false
scrollHeight - scrollTop === clientHeight
2.在需要的下拉地方写方法 如下图：
借鉴于 https://blog.csdn.net/weixin_30498921/article/details/95057744
利用scroll 事件来监听。
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
