使用原生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. C语言:假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母。-利用折半查找整数m在有序数组中的位置,若找到,返回下标值,否则返回-1。

    //假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母. #include <stdio.h> void f ...

  2. agc026F Lotus Leaves

    题目链接 题目大意 一个n*m的网格上有一些点,一个点可以跳到与其同一行或同一列的点上.给定起点和终点. 求要使起点不能跳到终点,最少撤走几个点. \(n,m\leq 100\) 解题思路 考虑将能够 ...

  3. 《JavaScript高级程序设计》读书笔记(三)基本概念第六小节理解函数

    内容---语法---数据类型---流程控制语句 上一小节---理解函数 本小节 函数--使用function关键字声明,后跟一组参数以及函数体 function functionName(arg0, ...

  4. Java基础题目

    题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 程序分析:兔子的规律为数列1,1,2,3,5,8, ...

  5. 【转载】五分钟让你彻底了解TDD、ATDD、BDD&RBE

    在目前比较流行的敏捷开发模式(如极限编程.Scrum方法等)中,推崇“测试驱动开发(Test Driven Development,TDD)”——测试在先.编码在后的开发实践.TDD有别于以往的“先编 ...

  6. 【网寻】IE F12 后报错,无法查看 DOM 等信息

    错误图片: 解决办法 : 安装Windows7补丁:KB3008923: 补丁下载地址: http://www.microsoft.com/en-us/download/details.aspx?id ...

  7. Java笔记---成员初始化

    成员初始化 成员初始化 Java尽力保证所有变量可以在使用前可以初始化. void f(){ int i; System.out.println(i); //! i++; //开幕雷击:这里就报错了, ...

  8. SpringBoot与Jpa入门

    一.JPA简介 目前JPA主要实现由hibernate和openJPA等. Spring Data JPA 是Spring Data 的一个子项目,它通过提供基于JPA的Repository极大了减少 ...

  9. 【转】How to create a test plan

    What is a Test Plan? A TEST PLAN is a detailed document that describes the test strategy, objectives ...

  10. ES5-严格模式

    在es5中可以开启一种严格模式的代码形式,开启方式是:将全局或者函数的第一条语句定义为:'use strict';. 如果浏览器不支持,会将其解析为一条普通语句,没有任何的副作用. 开启全局模式后会有 ...