使用原生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. oracle查询表统计行数与注释

    SELECT TABLE_NAME,NUM_ROWS,(select COMMENTS from user_tab_comments WHERE TABLE_NAME=C.TABLE_NAME) FR ...

  2. flink整合kafka报错 WARN - Bootstrap broker ip:9092 disconnected

    WARN - The configuration 'zookeeper.connect' was supplied but isn't a known config.WARN - The config ...

  3. python上传文件接口

    1.由于公司做接口测试,遇到了上传文件,一直搞了好久,原来是加了头部的原因def test_79(self): '''导入配置文件''' request = e['mysqlshujuku'] url ...

  4. django之路由分组,路由分发,FBV,CBV,ORM框架

    今日的内容: a. 路由系统 1. 创建app 2. 路由的分组 3. 路由的分发 - 正则表达式匹配 b. django的orm(模型model) 1. 创建模型的步骤 2. orm基本的增删改查 ...

  5. ROM, RAM, NVRAM and Flash Memory on Cisco Routers

    当谈到路由器有多少内存以及哪些内存做什么时,有时人们会感到困惑. 您应该熟悉4个内存术语,在升级路由器的IOS之前应检查其中2个. 这些是以下内容: ROM:ROM代表只读存储器. 它存储System ...

  6. 关于Mobility Express转LAP注意事项

    在实际的网络环境中,有些时候我们需要将ME模式的AP转换为LAP工作. PS:ME模式是思科8系列的AP可以支持,例如AP1852.AP2802.AP3802等型号.它可以作为控制器使用,同时也可以工 ...

  7. LeetCode中等题(三)

    题目一: 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明:1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m ...

  8. 【JQuery 选择器】 案例

    1.查找以id的某个字段开头的元素 setTimeout(function () { $("a[id^='menu_']").each(function () { $(this). ...

  9. CAN数据格式-BLF

    欢迎关注<汽车软件技术>公众号,回复关键字获取资料. Vector工具录制的数据,一般有ASC和BLF两种格式,本文介绍ASC. 1.BLF定义 BLF(binary logging fo ...

  10. 修改Linux的默认编码

    Windows的默认编码为GBK,Linux的默认编码为UTF-8.在Windows下编辑的中文,在Linux下显示为乱码.为了解决此问题,修改Linux的默认编码为GBK.方法如下: 方法1: vi ...