js如何实现上拉加载更多...

yagami 发布于2019-08-26 13:24 / 429人阅读

摘要：我们在项目中经常使用到下拉加载更多，之前要么是底部写加载按钮，要么是引入插件。

我们在项目中经常使用到下拉加载更多，之前要么是底部写加载按钮，要么是引入插件。今天终于有时间手写一个了，之前感觉挺麻烦，明白原理后，其实很简单...

此图片来自于网络

scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值；
clientHeight:它是一个定值，表示屏幕可是区域的高度；
scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body所有元素的长度，

由上面的三个值所产生一个原理公式：

scrollTop + clientHeight >= scrollHeight

    let clientHeight  = document.documentElement.clientHeight; //浏览器高度
    let scrollHeight = document.body.scrollHeight;
    let scrollTop = document.documentElement.scrollTop;
 
    let distance = 50;  //距离视窗还用50的时候，开始触发；

    if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
        console.log("到底了，开始加载数据");
    }

GPU云服务器云服务器 js上拉加载数据上拉加载 js如何实现隔行变色 js如何实现条件筛选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108749.html

webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）

摘要：因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用自带的组件实现上拉加载更多功能。代码如下上拉加载更多初始化方法如下下面便是上拉加载更多的方法这样就大功告成啦因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用mint-ui自带的loadmore组件实现上拉加载更多功能。首先在文件中引入组件 import {Indicator, Loadmore} f...

LiuZh 2019-08-20 15:35 评论0 收藏0
RecyclerView封装库和综合案例【包含25篇博客】

摘要：支持复杂页面，例如添加自定义头部和底部布局，支持横向滑动，还可以支持粘贴头部类似微信好友分组，支持不规则瀑布流效果，支持侧滑删除功能。支持粘贴头部的需求效果，这种效果类似微信好友分组的那种功能界面。目录介绍 1.复杂页面库介绍 2.本库优势亮点 2.1 支持多种状态切换管理 2.2 支持添加多个header和footer 2.3 支持侧滑功能和拖拽移动 2.4 其他亮点介绍 ...

silenceboy 2019-08-16 17:02 评论0 收藏0
复杂type页面封装库，支持多种状态切换和下拉刷新上拉加载

摘要：支持复杂页面，例如添加自定义头部和底部布局，支持横向滑动，还可以支持粘贴头部类似微信好友分组，支持不规则瀑布流效果，支持侧滑删除功能。十分方便实现复杂的布局页面，结构上层次分明，便于维护。目录介绍 1.复杂页面库介绍 2.本库优势亮点 2.1 支持多种状态切换管理 2.2 支持添加多个header和footer 2.3 支持侧滑功能和拖拽移动 2.4 其他亮点介绍 3.如...

Karrdy 2019-08-16 16:23 评论0 收藏0
实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

摘要：做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个插件好一点安装不要使用安装导入在哪个页面使用则在哪个页面导入这里的话，我使用全局导入会出现问题若有错还请大家指出暂时想到的就是局部引入注册组件注册组件做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点 1.npm安装 npm ins...

hightopo 2019-08-23 11:58 评论0 收藏0