使用原生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. pycharm连接数据库报错Access denied for user 'root'@'localhost' (using password:YES),以及wampserver 2/3个服务器正在运行 问题

    使用mysql版本为mysql5.7,参考下列 https://blog.csdn.net/qq_32969455/article/details/79051932 https://blog.csdn ...

  2. VS2017项目中使用代码连接MySQL数据库,以及进行数据添加

    //头文件 #include "mysql.h" //函数定义 // 执行sql语句, 包括增加.删除.更新数据 bool ExecuteSql(MYSQL m_mysql,con ...

  3. IMDB-TOP_250-爬虫

    这个小学期Python大作业搞了个获取IMDB TOP 250电影全部信息的爬虫.第二次写爬虫,比在暑假集训时写的熟练多了.欢迎大家评论. ''' ************************** ...

  4. 安装go1.11.2

    1. 设置go环境变量 vim $HOME/.bashrc export GOROOT=$HOME/go export PATH=$PATH:$GOROOT/bin export GOPATH=$HO ...

  5. MockMVC - 基于RESTful风格的Springboot,SpringMVC的测试

    MockMVC - 基于RESTful风格的SpringMVC的测试 对于前后端分离的项目而言,无法直接从前端静态代码中测试接口的正确性,因此可以通过MockMVC来模拟HTTP请求.基于RESTfu ...

  6. Unity2018编辑器脚本趟坑记录

    解除预制体问题:(这个例子是解除游戏中的Canvas与Asset中的预制体的关系) if( PrefabUtility.IsAnyPrefabInstanceRoot(GameObject.Find( ...

  7. python splash scrapy

    python splash scrapy 1.      前言 slpash是一个渲染引擎,它有自己的api,可以直接访问splash服务的http接口,但也有对应的包python-splash方便调 ...

  8. 吴裕雄 python 神经网络——TensorFlow 图像处理函数

    import numpy as np import tensorflow as tf import matplotlib.pyplot as plt image_raw_data = tf.gfile ...

  9. WLC exclusionlist

    Configuring Client Exclusion Configuring Client Exclusion Policies (GUI) Step 1   Choose Security &g ...

  10. LeetCode 234. Palindrome Linked List(判断是否为回文链表)

    题意:判断是否为回文链表,要求时间复杂度O(n),空间复杂度O(1). 分析: (1)利用快慢指针找到链表的中心 (2)进行步骤(1)的过程中,对前半部分链表进行反转 (3)如果链表长是偶数,首先比较 ...