使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了

实现效果:

实现代码:

首先添加监听滚动事件

mounted() {
window.addEventListener("scroll", this.scrollBottom, true);
},

滚动事件实现:

scrollBottom() {
// 滚动到页面底部时
const el = document.getElementById("content");
const windowHeight = window.screen.height;
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const contentHeight = el.clientHeight;
const toBottom = contentHeight - windowHeight - scrollTop;
if (toBottom < && !this.finished && !this.loading) {
this.loading = true;
// 请求的数据未加载完成时
this.getDataList();
}
}

vue使用H5实现滚动到页面底部时加载数据的更多相关文章

  1. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  2. vue 实现滚动到页面底部开始加载更多

    直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...

  3. Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

    index.php代码   [html] view plaincopy <!DOCTYPE html PUBLIC ;}                .single_item{padding: ...

  4. js 窗口滚动到一定高度时加载数据

    <script type="text/javascript"> //当窗口滚动到一定高度时 某块页面开始加载数据 window.onload = function() ...

  5. jQuery+ajax实现滚动到页面底部自动加载图文列表效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页

    1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...

  7. 监听table滚动事件,滚动到底部时加载数据

    mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...

  8. jquery实现滚动到页面底部时无限加载内容的代码

    var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...

  9. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

随机推荐

  1. .NET中的字符串(2):你真的了解.NET中的String吗?

    概述 String在任何语言中,都有它的特殊性,在.NET中也是如此.它属于基本数据类型,也是基本数据类型中唯一的引用类型.字符串可以声明为常量,但是它却放在了堆中.希望通过本文能够使大家对.NET中 ...

  2. mysql的一些不常用语句

    今天写项目,用的ThinkPHP,写的时候有点费劲,原因嘛 无非是对框架或者mysql的一些知识的遗忘. 1.为了配合ThinkPHP中的控制器,需要修改数据库中表名,一时想不起来,幸好有百度,问题很 ...

  3. PAT 1003 Emergency (25分)

    As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...

  4. 【代码审计】VAuditDemo SQL注入漏洞

    这里我们定位 sqlwaf函数 在sys/lib.php中,过滤了很多关键字,但是42 43 44行可以替换为空 比如我们可以 uni||on来绕过过滤

  5. WinForm开发(3)——使用vs2017打包winform安装程序的过程

    一.安装打包插件 注:安装好重启vs2017 ​ ​ 二.打包过程 ​ ​ 添加文件入口 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

  6. Mybatis中mapper.xml的使用

    详解多对多,mybatis多对多查询(xml方式和注解方式) 链接:https://blog.csdn.net/qq_42524262/article/details/98383977 链接:http ...

  7. redis基本操作,基于StringRedisTemplate,存储,取值,设置超时时间,获取超时时间,插入list操作

    @Autowired private StringRedisTemplate stringRedisTemplate; @GetMapping("/test") void test ...

  8. 路由器安全-NetFlow

    1.NetFlow介绍 提供高层次的诊断,分类和识别网络异常. 使用NetFlow来检查哪些行为改变明显的攻击是非常有效的. 就像Wiretap一样捕获数据包. NetFlow像电话账单.(谁和谁在通 ...

  9. 洛谷P1006传纸条

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个 m 行 n 列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了. ...

  10. 弱密码检测JR!

    1.JR(Joth the Ripper)简介·一款密码分析工具,支持字典式的暴力破解·通过对 shadow 文件的口令分析,可以检测密码·官方网站:http://www.openwall.com/j ...