Vue混入mixins滚动触底的方法

2020-06-12 20:48:51易采站长站整理

// 触底时进行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 的版本。