組件源碼 .vue文件
<!-- vue 分頁加載數(shù)據(jù)滾動加載更多 -->
<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
當頁面滾動觸底后觸發(fā)事件
ps :
需要保證內容部分超出頁面高度,即有可滾動的條件,可以觸發(fā)滾動
