vue实现瀑布流组件滑动加载更多

建议先看vue瀑布流组件上拉加载更多再来食用本文，如果直接想看源码文末就是~

10多年的龙华网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整龙华建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“龙华网站设计”,“龙华网站推广”以来，每个客户项目都认真落实执行。

文末新增组件优化，之所以没有删优化前的代码是想让以后自己还能看到走过的路。

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

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

1、上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调
2、上拉加载主要计算触摸滚动距离，滑动加载主要计算container底部和视窗上边缘的距离

事件绑定改成：

mounted() {
 ···
 this.dom.addEventListener('scroll', this.scroll, false)
 ···
 },

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

源码如下：

———————-我是分割线——————–

2017-09-18 组件优化

我们在写组件时候，通常会大致先分为两种，业务组件和通用组件，业务组件通和业务逻辑相关，一般作为一个业务模块的局部组件， 比如列表中的列表项组件；通用组件适用面广，不会和业务有牵扯，比如弹出框组件。

所以我们开始封装一个组件的时候，就要划分业务逻辑，做什么，不做什么，从外部接收什么，向外部提供什么，这个边界应该非常清楚

但是之前的封装的loadmore组件不太符合这一点，可能是项目一开始比较关注功能的实现，将其当成的一个业务组件撰写，现在有一点需要优化：

之前我们传入了各种请求相关的参数，包括url在组件内部完成加载和页码控制等一系列操作，显然这不太符合组件功能职责单一化的原则， 其实组件内部并不关心加载到第几页或者是需要请求什么后端接口，而只要父组件告诉自己是否还可以加载就可以了， 至于加载请求列表，子组件通知父组件去加载就OK。

最终我们得到一个和业务完全分离的通用组件，代码如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。