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

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

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

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

上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在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()
          }
        }
      },

源码如下:

<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=
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值