// 触底时进行load组件显示
if(isOver){
// 判断loading组件是否已经存在,不存在就创建一个
if(!this.component){
this.component = extendComponents(load)
}
// 创建加载组件
this.loadMore&&this.loadMore()
// 判断当前状态来控制loading的组件显示与否
if(!this.isLoading){
this.component.$el.remove()
// 将loading组件置为空
this.component = null
}
}
},DEALY_TIME)
window.addEventListener('scroll',fn)
},
详细代码
完整代码可以 点击查看 codepen 触底动画 关于上面代码中
extendComponents 方法的实现可以查看详细代码,也可以查看 Vue.extend 编程式插入组件最后
将滚动触底的逻辑和 UI 都集成到 scroll.js 中,复用都方式可以放在 mixins 可以抽离成 v-directive,这样我们可以接受到绑定的 dom 不仅仅可以做 window 的滚动触底事件的判断,也可以
实现单个元素的滚动事件触底的监听 。后续可以在实现 v-directive 的版本。










