使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了

实现效果:

实现代码:

首先添加监听滚动事件

  1. mounted() {
  2. window.addEventListener("scroll", this.scrollBottom, true);
  3. },

滚动事件实现:

  1. scrollBottom() {
  2. // 滚动到页面底部时
  3. const el = document.getElementById("content");
  4. const windowHeight = window.screen.height;
  5. const scrollTop =
  6. document.documentElement.scrollTop || document.body.scrollTop;
  7. const contentHeight = el.clientHeight;
  8. const toBottom = contentHeight - windowHeight - scrollTop;
  9. if (toBottom < && !this.finished && !this.loading) {
  10. this.loading = true;
  11. // 请求的数据未加载完成时
  12. this.getDataList();
  13. }
  14. }

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. UIResponder的API

    @property(nonatomic, readonly) UIResponder *nextResponder; 返回响应者链中的下一个响应者,或者nil如果没有下一个响应者. @property ...

  2. win 10 家庭中文版安装docker ,但是没有 Hyper-V , 这样一步搞定

    本人要在 win 10 上安装docker,找了安装教程,按照安装教程,第一步开启Hyper-V 虚拟机,但是发现自己电脑上没有这个选项 然后找到了这位仁兄  http://www.win7999.c ...

  3. 9000端口号被上一个ip地址占用,需要reboot才可以恢复正常ip端口问题

    比如查看端口# lsof -i:9000 本机ip已经修改为192.168.0.50,而经过# lsof -i:9000查看到,端口是这样的,192.168.0.88:9000,显示的还是上一个ip的 ...

  4. POJ3264 Balances Lineup

    建两颗线段树分别存最大和最小值,模板题~ #include<cstdio> #include<algorithm> #include<cstring> using ...

  5. Docker for YApi--一键部署YApi

    获取YApi镜像$ docker pull mrjin/yapi:latest 注意:本仓库目前只支持安装,暂不支持升级,请知晓.如需升级请备份mongoDB内的数据. docker-compose ...

  6. vPC配置

    1.vPC概述 如下图所示,在传统网络中,出于冗余考虑,汇聚层往往由2台设备构成,一台接入层交换机使用2根上联链路,分别连接汇聚层2台设备. 这种拓扑所带来的问题是:受制于STP,对于同一个VLAN的 ...

  7. kafka connector

    Kafka Connect 是一种用于在 Kafka 和其他系统之间可扩展的.可靠的的流式传输数据的工具.它使得能偶快速定义将大量数据集合移入和移除 kafka 连接器变得简单. kafka conn ...

  8. SSD算法

    SSD算法 2016  出的目标检测算法 SSD效果主要有三点: 1.多尺度 2.设置了多种宽高比的(anchor box)default box 3.数据增强 1.1  设置 default box ...

  9. 解决 Anaconda 3.7更新出现CondaHTTPError与SSLError

    1.问题描述: An HTTP error occurred when trying to retrieve this URL. HTTP errors are often intermittent, ...

  10. spark实验(一)--linux系统常见命令及其文件互传(2)

    2.使用 Linux 系统的常用命令 启动 Linux 虚拟机,进入 Linux 系统,通过查阅相关 Linux 书籍和网络资料,或者参考 本教程官网的“实验指南”的“Linux 系统常用命令”,完成 ...