使用原生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. 2.1.FastDFS-单机拆分版-单机版安装配置

    Centos610系列配置 1.什么是FastDFS? FastDFS是一个开源的分布式文件系统,她对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负 ...

  2. docker-install-v0.1-alpha

    Written by Zak Zhu docker-install-v0.1-alpha/ ├── inventory ├── roles │ └── docker │ ├── defaults │

  3. SSIS 从oracle 转数据回MS SQL

    SSIS 从oracle 转数据回MS SQL,转每月的销售记录,大概15000以内,在开发机器上没问题,部署到生产环境出现各种状况“ SSIS 无法从连接伺服器的OLE DB提供者BULK 提取资料 ...

  4. svn服务器IP/URL地址更换,修改本地的仓库地址

    TortoiseSVN服务器ip地址修改后如何使用_windows和linux下svn切换新仓库地址的方法 windows下svn切换仓库地址 右键项目文件夹 TortoiseSVN => Re ...

  5. JSP页面中关于<c:if test="${...}"><c:if>标签的用法

    代码如下: <td class="showTd_HK" align="center"> <c:if test="${(rwyy01. ...

  6. iOS 混合开发之 Cordova 实践

    在15年时,之前公司使用 Cordova 做混合开发使用,后来公司没有用到了,现在重新记录下. Cordova (官网:http://cordova.apache.org/)简介: Apache Co ...

  7. 树莓派4B踩坑指南 - (6)安装常用软件及相关设置

    安装软件 安装LibreOffice中文包 sudo apt-get install libreoffice-l10n-zh-cn sudo reboot 安装codeblocks并汉化: sudo ...

  8. 实现纸牌游戏的随机抽牌洗牌过程(item系列几个内置方法的实例)

    实现纸牌游戏的随机抽牌洗牌过程(item系列几个内置方法的实例) 1.namedtuple:命名元组,可以创建一个没有方法只有属性的类 from collections import namedtup ...

  9. cross_val_score 交叉验证与 K折交叉验证,嗯都是抄来的,自己作个参考

    因为sklearn cross_val_score 交叉验证,这个函数没有洗牌功能,添加K 折交叉验证,可以用来选择模型,也可以用来选择特征 sklearn.model_selection.cross ...

  10. 解决Hibernate配置文件不在SRC文件夹下获取Session方法