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 ...
随机推荐
- UIResponder的API
@property(nonatomic, readonly) UIResponder *nextResponder; 返回响应者链中的下一个响应者,或者nil如果没有下一个响应者. @property ...
- win 10 家庭中文版安装docker ,但是没有 Hyper-V , 这样一步搞定
本人要在 win 10 上安装docker,找了安装教程,按照安装教程,第一步开启Hyper-V 虚拟机,但是发现自己电脑上没有这个选项 然后找到了这位仁兄 http://www.win7999.c ...
- 9000端口号被上一个ip地址占用,需要reboot才可以恢复正常ip端口问题
比如查看端口# lsof -i:9000 本机ip已经修改为192.168.0.50,而经过# lsof -i:9000查看到,端口是这样的,192.168.0.88:9000,显示的还是上一个ip的 ...
- POJ3264 Balances Lineup
建两颗线段树分别存最大和最小值,模板题~ #include<cstdio> #include<algorithm> #include<cstring> using ...
- Docker for YApi--一键部署YApi
获取YApi镜像$ docker pull mrjin/yapi:latest 注意:本仓库目前只支持安装,暂不支持升级,请知晓.如需升级请备份mongoDB内的数据. docker-compose ...
- vPC配置
1.vPC概述 如下图所示,在传统网络中,出于冗余考虑,汇聚层往往由2台设备构成,一台接入层交换机使用2根上联链路,分别连接汇聚层2台设备. 这种拓扑所带来的问题是:受制于STP,对于同一个VLAN的 ...
- kafka connector
Kafka Connect 是一种用于在 Kafka 和其他系统之间可扩展的.可靠的的流式传输数据的工具.它使得能偶快速定义将大量数据集合移入和移除 kafka 连接器变得简单. kafka conn ...
- SSD算法
SSD算法 2016 出的目标检测算法 SSD效果主要有三点: 1.多尺度 2.设置了多种宽高比的(anchor box)default box 3.数据增强 1.1 设置 default box ...
- 解决 Anaconda 3.7更新出现CondaHTTPError与SSLError
1.问题描述: An HTTP error occurred when trying to retrieve this URL. HTTP errors are often intermittent, ...
- spark实验(一)--linux系统常见命令及其文件互传(2)
2.使用 Linux 系统的常用命令 启动 Linux 虚拟机,进入 Linux 系统,通过查阅相关 Linux 书籍和网络资料,或者参考 本教程官网的“实验指南”的“Linux 系统常用命令”,完成 ...