专栏首页coding个人笔记vue上拉加载更多组件

vue上拉加载更多组件

我想,工作一段时间的都碰见过上拉加载更多需求,现在这种插件也蛮多的,也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题,就是下拉到最底部,刷新浏览器,浏览器会记住这个距离,从而触发上拉加载的方法。虽然这个小问题在正常情况下没什么影响,于是自己就研究研究,写了一个上拉加载更多的组件。

要写上拉加载其实还分两种场景,一种是相对window,也就是相对于可视窗口,一种是在一个容器内。大部分使用场景是相对窗口,所以暂时只写了一个相对于window的。

上拉加载原理简单来说就是判断内容是否到达底部。容器自身的高度加上距离顶部的距离就是现在整个页面的高度。整个页面的高度减去可视窗口的高度再减去滚动条移动的距离,当接近0的时候就是到达底部的时候。

明白了这个原理上拉加载就很好实现了。

标签:

<div id="scroll"> <slot></slot></div>

这边使用了vue的slot插槽。

data:

windowHeight: '',contentOffSetHeight: '',downT: ''

因为可视窗口和距离顶部的距离是不会变的,所以初始化的时候就赋值,downT是监听滚动防抖用的。

Props:

props: ['up', 'bottomDistance'],

up对应的就是父组件传递的到达底部是触发的方法,'bottomDistance'是可以设置到达底部距离多少的时候触发加载更多的方法。

Mounted:

if(history.scrollRestoration){ history.scrollRestoration= 'manual';};this.windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//可视窗口高度this.contentOffSetHeight = document.getElementById('scroll').offsetTop;//容器距离顶部高度window.addEventListener('scroll', this.onScroll);

这边可视窗口采用了兼容的写法,然后history.scrollRestoration这个可以去了解一下,就是不记住滚动的距离,刷新的时候就不会直接触发加载方法。然后监听window滚动。

onScroll() { if(this.downTime){ clearTimeout(this.downTime); }; this.downTime = setTimeout(() => { let contentHeight = document.getElementById('scroll').clientHeight;//容器高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//窗口滚动条高度 if (contentHeight + this.contentOffSetHeight - this.windowHeight - scrollTop <= (this.bottomDistance || 0)) { //加载更多操作 this.$emit('up') } }, 200);}

加上了节流,bottomDistance不穿默认为0,然后节流设置了200毫秒。

最后beforeDestroy:

window.scrollTo(0, 0);
window.removeEventListener('scroll', this.onScroll)

刷新当前页面或者离开页面的时候移动到最顶部,防止记住滚动条位置,亲测,要是没有设置history.scrollRestoration,vue生命周期会先移动到顶部然后再移动到记住的位置。其实设置了这个移动到顶部也不需要,这边为了稳定就加上了。还有就是要移除监听滚动,我试了,跟定时间计时器一样,没有在组件销毁的时候移除,会一直存在。

要说的是,这边没有写加载更多的动画效果,使用的时候可以自定义一个然后隐藏,在触发加载更多的时候显示,加载完之后隐藏,包括已经到底部,都可以自定义。虽然会稍显麻烦,主要是考虑到我写的估计很多人会不喜欢。

这样看会比较不直观,所以推荐去npm下载一下:

https://www.npmjs.com/package/wade-ui

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • this的指向

    This的指向问题一直是JavaScript的一大核心,很多人都是觉得了解了,但是又模模糊糊。简单概括就是,this的指向永远是指向调用这个this的对象。下面...

    wade
  • 实现一个Promise之基础、异步

    其实跟着promise a+一步一步,按照顺序实现一个promise并不难,今天先实现最简单的promise和异步resolve。本来想全部一次性写完,想想还是...

    wade
  • js异步并行和串行

    最近学了学webpack的插件,其实挺简单的,webpack本质上是一种事件流机制,核心是tapable(不是table),通过事件的注册和监听,触发函数方法。...

    wade
  • Windows下bat批处理脚本使用telnet批量检测远程端口小记

    多年没写过批处理了,来新公司的第一个 case 却是需要写一个 bat 脚本,批量更新采集 agent 的配置文件,其中就涉及到远程 IP 的端口检测。 本以为...

    张戈
  • 为什么不应该公开用来同步的加锁对象?为什么不应该 lock(this)/lock(string) 或者 lock 任何非私有对象?

    如果你编写线程安全代码时为了省事儿直接 lock(this),或者早已听说不应该 lock(this),只是不知道原因,那么阅读本文可以帮助你了解原因...

    walterlv
  • 在 C++ 中,你甚至可以 b()()()(); ——介绍 ref qualifier

    在传统 C++ 中,成员函数通过 this 指针访问。可以处理所有需要左值的情况。

    春帆
  • 【温故】金融数据挖掘之朴素贝叶斯

    你和我之前的人生, 就像是来自同一个分布族的共轭曲线, 即使有各自的参数空间, 也注定要相识相念。 你和我之后的人生, 是我们相扶相持下不离不弃的最大似然, 用...

    数说君
  • 鹅厂设计实习生通关记

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 不久前,有幸受邀参加“I ? UX校园论坛分享会”,面向在校学生分享在鹅厂的实习经...

    腾讯ISUX
  • 比特币交易所系统开发如何适应海外市场?

    近日央视携《对话》栏目帮助电视机前的观众们更好的探寻区块链是什么、会为我们的生活带来哪些改变、这项技术具体应该如何应用。

    ruiec1212
  • “神奇”的拉马努金矩阵

    斯里尼瓦瑟·拉马努金(泰米尔语:ஸ்ரீனிவாஸ ராமானுஜன் ஐயங்கார்,ISO 15919转写:Srīṉivāsa Rāmāṉujan Aiy...

    滚神大人

扫码关注云+社区

领取腾讯云代金券