组件源码 .vue文件
<!-- vue 分页加载数据滚动加载更多 -->
<template>
<div
style="height:100%;overflow:auto"
ref="filesTable"
>
<div
ref="tableInner"
class="tableInner"
>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
// 滚动加载更多
const _this = this;
const _filesTable = this.$refs.filesTable;
const _offsetHeight = _filesTable.offsetHeight;
_filesTable.addEventListener("scroll", () => {
const _scrollTop = _filesTable.scrollTop;
const _bodyHeight = _this.$refs.tableInner.clientHeight;
if (_scrollTop + _offsetHeight >= _bodyHeight) {
_this.$emit("dataScroll")
}
});
},
methods: {},
components: {}
};
</script>
引用方式:
<tssi-scroll @dataScroll="dataScroll">
<slot>内容</slot>
</tssi-scroll>
Events
@dataScroll
type: function
当页面滚动触底后触发事件
ps :
需要保证内容部分超出页面高度,即有可滚动的条件,可以触发滚动
