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

前端之家收集整理的这篇文章主要介绍了vue loadmore 组件滑动加载更多源码解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

事件绑定改成:

事件回调改为:

获取Vue实例使用的根 DOM 元素相对于视口的位置 const rect = parentNode.getBoundingClientRect() // this.distance 离底部多少距离开始加载 // 如果此元素底边距离视口顶部的距离小于视口高度加上distance之和,就加载下一页 if ((rect.bottom <= viewHeight + this.distance) && this.loadable && !this.loading) { this.load() } } },

源码如下:

以上所述是小编给大家介绍的vue loadmore 组件滑动加载更多源码解析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章