使用原生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. python中,字符串前的u,b,r字符的含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时 ...

  2. Python使用Tensorflow出现错误: UserWarning: The default mode, 'constant'

    Python使用Tensorflow出现错误: UserWarning: The default mode, 'constant', will be changed to 'reflect' in s ...

  3. Computational Complexity of Fibonacci Sequence / 斐波那契数列的时空复杂度

    Fibonacci Sequence 维基百科 \(F(n) = F(n-1)+F(n-2)\),其中 \(F(0)=0, F(1)=1\),即该数列由 0 和 1 开始,之后的数字由相邻的前两项相加 ...

  4. [JLOI2009]神秘的生物

    题目链接 题目大意 给定一个\(n*n\)的矩阵,从其中选取恰好一个连通块,使选取的格子所对应的权值和最大. \(n\leq 9\) 解题思路 由于\(n\)特别小,考虑插头dp. 和一般的插头dp不 ...

  5. 《JavaScript高级程序设计》读书笔记(三)基本概念第三小节 String、Object类型

    内容---语法 上一小节---数据类型 本小节 String类型---流程控制语句---理解函数 String类型--零个或者多个16位Unicode字符组成字符序列,即字符串--可以由双引号&quo ...

  6. combobox实现模糊搜索匹配

    如图,输入关键字,进行匹配检索: 这里使用的是combobox组合框,对于combobox的创建可以使用<input>输入框,也可以使用<select>下拉选 HTML代码: ...

  7. EXPOSE ocker run -P 时,会自动随机映射 EXPOSE 的端口

    EXPOSE 声明端口 格式为 EXPOSE <端口1> [<端口2>...]. EXPOSE 指令是声明运行时容器提供服务端口,这只是一个声明,在运行时并不会因为这个声明应用 ...

  8. 吴裕雄--天生自然Python Matplotlib库学习笔记:matplotlib绘图(2)

    import numpy as np import matplotlib.pyplot as plt fig = plt.figure() fig.subplots_adjust(bottom=0.0 ...

  9. WLC HA (for AP)?

    在WLC的配置上,如果有AP注册到WLC,我们实际上可以看到两部分配置: part I part II 问题来了,那么这两部分是什么关系呢?是不是一样的呢? 从目前的了解来看,我的认知是这两个配置都是 ...

  10. Codeforces #590 D 二维树状数组

    题意 给一个10^5之内的字符串(小写字母)时限2s 输入n,有n个操作  (n<10^5) 当操作是1的时候,输入位置x和改变的字母 当操作是2的时候,输入区间l和r,有多少不同的字母 思路 ...