vue使用H5实现滚动到页面底部时加载数据
使用原生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实现滚动到页面底部时加载数据的更多相关文章
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- vue 实现滚动到页面底部开始加载更多
直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
- js 窗口滚动到一定高度时加载数据
<script type="text/javascript"> //当窗口滚动到一定高度时 某块页面开始加载数据 window.onload = function() ...
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页
1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...
- 监听table滚动事件,滚动到底部时加载数据
mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...
- jquery实现滚动到页面底部时无限加载内容的代码
var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
随机推荐
- ASP.NET Core搭建多层网站架构【9.1-使用Autofac代替原生的依赖注入】
2020/01/30, ASP.NET Core 3.1, VS2019, Autofac.Extensions.DependencyInjection 5.0.1 摘要:基于ASP.NET Core ...
- idea如何提取变量(拆分变量赋值和声明)
需求描述: 我们时常遇到某个在某个局部作用域声明的变量,想要用在另一个地方,此时就需要在作用域外部声明变量,在作用域中给变量赋值. 在eclipse中这个功能和提取变量在一起,我们可以方便的拆分变量的 ...
- unittest和unittest2的区别差异、unittest2框架------执行原理
unittest和unittest2的区别差异 参考:https://pypi.org/project/unittest2/ unittest2是Python 2.7及更高版本中添加到unittest ...
- 创业学习--《预判行业机会》--B-2.预判模块---HHR计划--以太一堂
一,<开始学习> 1,行业机会的判断,是可以通过不断地训练提高自己的判准的概率的,要科学思考创业. 2,创业者在行业机会上的三个问题: a. 对市场变化,敏感性太弱,没有洞察行业的意识. ...
- WLC-生成CSR操作
1.生成CSR [req]req_extensions = v3_req[ v3_req ]# Extensions to add to a certificate requestbasicConst ...
- Myeclipse下PHP开发环境搭建及运行
外接CSDN链接 http://blog.csdn.net/yuxiangaaaaa/article/details/54948426 这是php初始设置,后面进行重新设置
- Babel的安装和使用
安装Node.JS 和 npm,如未安装可参照其他文章 1.创建一个package.json npm init (回车, 一直下一步即可) 安装 Babel npm install --save-de ...
- 很重要的C++的位运算bitset
本文摘录于柳神笔记: bitset ⽤来处理⼆进制位⾮常⽅便.头⽂件是 #include , bitset 可能在PAT.蓝桥OJ中不常 ⽤,但是在LeetCode OJ中经常⽤到-⽽且知道 bits ...
- nyoj 40
题目:http://acm.nyist.edu.cn/JudgeOnline/status.php?pid=40 求最大公约数和最小公倍数... 思路:欧几里德算法求出最大公约数,即最大公约数 = g ...
- 「JSOI2014」歌剧表演
「JSOI2014」歌剧表演 传送门 没想到吧我半夜切的 这道题应该算是 \(\text{JSOI2014}\) 里面比较简单的吧... 考虑用集合关系来表示分辨关系,具体地说就是我们把所有演员分成若 ...