使用原生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. VS2017中使用C++语言编写delay函数实现延迟

    秒级别的延时 //定义函数 void delay(int sec){ time_t start_time, cur_time; // 变量声明 time(&start_time); do { ...

  2. 1143. Longest Common Subsequence

    link to problem Description: Given two strings text1 and text2, return the length of their longest c ...

  3. 探讨 Git 代码托管平台的若干问题

    关于 Git 版本控制软件种类繁多,维基百科收录的最早的版本控制系统是 1972 年贝尔实验室开发的 Source Code Control System.1986 年 Concurrent Vers ...

  4. WinForm开发(4)——使用Visual-Studio-2010-打包安装程序

    打包程序: 1,解决方案—右键菜单“添加”—新建项目—其他项目类型—安装和部署—Visual Studio Installer—安装项目,输入名称Setup1,点“确定” 2,添加开始程序中的文件夹: ...

  5. pom.xml文件中properties有什么用

    properties标签的作用: 在标签内可以把版本号作为变量进行声明,后面dependency中用到版本号时可以用${变量名}的形式代替,这样做的好处是:当版本号发生改变时,只有更新properti ...

  6. 兔子与兔子(字符串hash)

    传送门 很久很久以前,森林里住着一群兔子. 有一天,兔子们想要研究自己的 DNA 序列. 我们首先选取一个好长好长的 DNA 序列(小兔子是外星生物,DNA 序列可能包含 26 个小写英文字母). 然 ...

  7. 杭电 2096 小明A+B

    小明A+B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. 很重要的C++的位运算bitset

    本文摘录于柳神笔记: bitset ⽤来处理⼆进制位⾮常⽅便.头⽂件是 #include , bitset 可能在PAT.蓝桥OJ中不常 ⽤,但是在LeetCode OJ中经常⽤到-⽽且知道 bits ...

  9. 解决xpath中文乱码

    利用xpath建标签树以后,虽然提高了元素匹配效率,但是etree会把中文转为ASCII码,所以简单地tostring以后会有乱码. 解决方法: import requests from reques ...

  10. 1013 Battle Over Cities (25分) DFS | 并查集

    1013 Battle Over Cities (25分)   It is vitally important to have all the cities connected by highways ...