vue loadmore 组件滑动加载更多源码解析

vue loadmore 组件滑动加载更多源码解析

上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。

既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意：

上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调

上拉加载主要计算触摸滚动距离，滑动加载主要计算container底部和视窗上边缘的距离

事件绑定改成：

mounted() {

this.dom.addEventListener('scroll', this.scroll, false)

http://

},

beforeDestroy() {

this.dom.removeEventListener('scroll', this.scroll, false)

},

事件回调改为：

/**

* 滚动钩子

*/

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()

}

}

},

源码如下：

正在加载

加载更多

没有更多了

以上所述是给大家介绍的vue loadmore 组件滑动加载更多源码解析，希望对大家http://有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。