上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。
既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意：
上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调
上拉加载主要计算触摸滚动距离，滑动加载主要计算container底部和视窗上边缘的距离
事件绑定改成：
rush:js;">
mounted() {
···
this.dom.addEventListener('scroll',this.scroll,false)
···
},beforeDestroy() {
···
this.dom.removeEventListener('scroll',
事件回调改为：
rush:js;">
/**
* 滚动钩子
*/
scroll() {
const viewHeight = global.innerHeight
let parentNode
if (this.container !== global) {
parentNode = this.$el
} else {
parentNode = this.$el.parentNode
}
if (parentNode) {
// 获取Vue实例使用的根 DOM 元素相对于视口的位置
const rect = parentNode.getBoundingClientRect()
// this.distance 离底部多少距离开始加载
// 如果此元素底边距离视口顶部的距离小于视口高度加上distance之和，就加载下一页
if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) {
this.load()
}
}
},
源码如下：
rush:js;">
