data() {
return {
dom: null, // 外部容器dom
}
},
mounted() {
if (this.container !== global) {
this.dom = document.querySelector(this.container)
} else {
this.dom = this.container
}
if (!this.dom) {
return
}
this.dom.addEventListener('scroll', this.scroll, false)
if (this.autoload && !this.loading) {
this.load()
}
},
methods: {
/**
* 滚动钩子
*/
scroll() {
if (!this.loading) {
return
}
const viewHeight = global.innerHeight
let parentNode
if (this.container !== global) {
parentNode = this.$el
} else {
parentNode = this.$el.parentNode
}
if (parentNode) {
const rect = parentNode.getBoundingClientRect()
if ((rect.bottom <= viewHeight + this.distance)) {
this.load()
}
}
},
/**
* 加载一组数据的方法
*/
load() {
this.$emit('load')
},
},
beforeDestroy() {
if (this.dom) {
this.dom.removeEventListener('scroll', this.scroll, false)
}
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.loadmore {
user-select: none;
&__footer {
color: #e4e4e4;
padding: 20px;
text-align: center;
}
.tc-loading {
~ span {
vertical-align: middle;
}
}
}
</style>
