使用原生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. 定义列表dl中标签 dt 与标签dd对齐方法,标签ul与标签li对齐

    不定义css样式时(默认情况): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  2. canvas的beginPath和closePath

    https://www.cnblogs.com/xuehaoyue/p/6549682.html https://segmentfault.com/a/1190000010330319 https:/ ...

  3. 5_7 丑数(UVa136)<priority_queue的使用>

    Ugly Number的定义为:该数之质因数必须为2,3或5,当然了,依照惯例,1也算是Ugly Number.在此列举一串数列:1,2,3,4,5,6,8,9,10,12,15这些就是前11个Ugl ...

  4. selenium+python+unittest实现自动化测试(入门篇)

    本文主要讲解关于selenium自动化测试框架的入门知识点,教大家如何搭建selenium自动化测试环境,如何用selenium+python+unittest实现web页面的自动化测试,先来看看se ...

  5. phantomjs安装步骤

    Windows环境:1.下载http://phantomjs.org/download.html2.解压phantomjs-2.1.1-windows.zip3.配置环境变量将解压的bin目录的路径配 ...

  6. Mybatic逆向工程的使用

    前言:利用别人的方法.知识.经历或精神成为你自己,不思考不实践不总结不反馈,就不会变成你的. 转载必须表明出处:https://www.cnblogs.com/fby698/p/9463831.htm ...

  7. Vue——前端生成二维码

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm np ...

  8. Java面向对象编程 -2.2

    构造方法与匿名对象 现在的程序在使用类的时候一般都按照了如下的步骤进行: 声明并实例化对象,这个时候实例化对象中的属性并没有任何的数据存在,都是其对于数据类型的默认值 需要通过一系列的setter方法 ...

  9. leetcode 0208

    目录 ✅ 108. 将有序数组转换为二叉搜索树 描述 解答 py [tdo rev 0208]py知识:if not x: 和if x is not None:和if not x is None:使用 ...

  10. [C++基本语法:从菜鸟变成大佬系列,就像1,2,3那么简单](七):C++的修饰符

    修饰符是什么? C++允许char,int和double数据类型在它们之前有修饰符.修饰符用于改变基本类型的含义,以便更精确地满足各种情况的需要. 这里列出了数据类型修饰符: signed unsig ...