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

最新推荐文章于 2024-08-08 10:30:00 发布

BenjaminShih

最新推荐文章于 2024-08-08 10:30:00 发布

阅读量1w

点赞数 1

分类专栏： Vue-js 文章标签： vue 滑动加载 loadmore 加载更多

本文链接：https://blog.csdn.net/sjn0503/article/details/75314641

版权

本文介绍了如何将Vue瀑布流组件从上拉加载更改变为滑动到底部自动加载。作者强调了组件优化的重要性，指出组件应该有清晰的功能边界，并分享了优化后的代码，使得组件更加通用，不再涉及具体的请求逻辑，仅负责触发加载更多的信号。

摘要由CSDN通过智能技术生成

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

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

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

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

上拉加载是point指针touch触摸事件，现在因为是滑动加载，需要添加scroll事件去监听然后执行相应回调
上拉加载主要计算触摸滚动距离，滑动加载主要计算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()
          }
        }
      },

源码如下：

<template>
  <div class="loadmore" ref="loadmore">
    <div class="loadmore__body">
      <slot></slot>
    </div>
    <div class="loadmore__footer">
      <span v-if="loading">
        <i class="tc-loading"></i>
        <span>正在加载</span>
      </span>
      <span v-else-if="loadable">加载更多</span>
      <span v-else>没有更多了</span>
    </div>
  </div>
</template>

<script type=