场景

有些时候,我们在pc端经常会遇见滚动到底部的时候,去加载下一页的数据,

这个时候,我们就需要知道滚动条什么时候触底了,

如果触底了,就去加载下一页的数据;

在触底的过程中,我们需要注意的是,防止数据堆叠;


<style type="text/css">

	.bottom-content{

		height: 500px;

		width: 660px;

		overflow-y: auto;

		border: 1px solid #ccc;

	}

	.day-item{

		height: 50px;

		line-height: 50px;

	}

</style>


<body>

	<div id="app">

		<div class="bottom-content" ref="contentList">

			<div

				class="day-item"

				v-for="(dayItem, dayIndex) in everdayHomeWorkList"

				:key="dayIndex"

			>

				{{dayItem.cont }}

			</div>

		</div>

	</div>

</body>


<script>

new Vue({

	el: '#app',

	data: function() {

	return {

		everdayHomeWorkList:[

		   {cont:"我们建议使用 CDN 引入 Element 的看 unpkg.com。"},

		   {cont:"我们建议使用 CDN 引入 址上锁定版本，以免将"},

		   {cont:"我们建议使用 CDN 引入 Elem影响。锁定版本的方法kg.com。"},

		   {cont:"我们建议使用 CDN 引入 Element 的上锁定版本om。"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户上锁查看 unpkg.com。"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户在定版本，"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户在"},

		   {cont:"我们建议使用 CDN 引入 Element 的用com。"},

		   {cont:"我们建议使用 CDN 引入 Element 的用m。"},

		   {cont:"我们建议使用非兼容性更新的影响。.com。"},

		   {cont:"我们建议使用 CDN 引入 Elemem。"},

		   {cont:"我们建议使用 CDN 引入 Element以免将"},

		   {cont:"我们建议使用 CDN 引入 Element 方法.com。"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户在链接地。"},

		   {cont:"我们建议使用 CDN 引入 Elementpkg.com。"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户在"},

		   {cont:"我们建议使用 CDN 引入 Element 的用户在链接unpkg.com。"},

		   {cont:"我们建议使用 CDN 引入 Element 。"},

		   {cont:"我们建议使用非兼容性更新的影响。锁定版本的方om。"}

		],

		canscroll:true,

		papeIndex:1

	}

},

mounted() {

	let contentList = this.$refs.contentList;

	contentList.addEventListener('scroll', () => {

		if(this.canscroll) {

			let scrollTop = contentList.scrollTop;              // 获取div滚动离顶部的距离

			let listHight = contentList.clientHeight;           // 获取div自身的的高度

			let scrollHeight = contentList.scrollHeight;        // 获取div滚动区域的高度

			if(scrollTop + listHight === scrollHeight){

				this.papeIndex++;

				console.log("到底了")

				this.request_api();//发送请求

			}else{

			}

		}

	})

},

methods:{

	request_api(){

		// 发送请求，成功后，将canscroll 重置

	}

}

})

</script>

js下拉加载更多-详解的更多相关文章

  1. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  2. XListView下拉刷新和上拉加载更多详解

    转载本专栏每一篇博客请注明转载出处地址,尊重原创.博客链接地址:小杨的博客 http://blog.csdn.net/qq_32059827/article/details/53167655 市面上有 ...

  3. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  4. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  5. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  6. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  7. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  8. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

  9. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  10. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

随机推荐

  1. 1024程序员节献礼，火山引擎ByteHouse带来三重产品福利

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流.   随着信息技术飞速发展,互联网.Web3.物联网.人工智能相继出现. 在这近三十年的高速发展中,"程序 ...

  2. Solon2 开发之插件，三、插件体外扩展机制（E-Spi）

    插件体外扩展机制,简称:E-Spi.用于解决 fatjar 模式部署时的扩展需求.比如: 把一些"业务模块"做成插件包放到体外 把数据源配置文件放到体外,方便后续修改 其中, .p ...

  3. 学习 Java 还是 Solon 简单，v1.9.0 发布

    入手很简单哦: pom.xml 添加依赖 <dependency> <groupId>org.noear</groupId> <artifactId>s ...

  4. Jenkins Pipeline 流水线 - 拉代码(SVN) + Maven 编译打包

    Jenkins Pipeline 流水线 步骤 拉取SVN代码 -> Maven 构建 -> Docker 编译 -> 发布至阿里云仓库 -> K8S 更新 Jenkins插件 ...

  5. Centos7 cmake版本升级（v2.8.12.2->v3.16.6)

    1. 查看当前cmake版本 [root@localhost ~]# cmake -version cmake version 2.8.12.2 2. 进行卸载 [root@localhost ~]# ...

  6. GIL 锁或将在 CPython 中成为可选项

    哈喽大家好,我是咸鱼 几天前有媒体报道称,经过多次辩论,Python 指导委员会打算批准通过 PEP 703 提案,让 GIL(全局解释器)锁在 CPython 中成为一个可选项 PEP 703 提案 ...

  7. 42 干货系列从零用Rust编写负载均衡及代理，wmproxy中配置tcp转websocket

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,七层负载均衡,内网穿透,后续将实现websocket代 ...

  8. CF：706B. Interesting drink （二分查找）

    题意:不同奶茶店里同样的奶茶价格不同,问在当天Yuki持有的零钱能在几家店购买 思路:对价格数组排序,先优先判断是否会比较最大值和最小值,然后二分查找 #include<bits/stdc++. ...

  9. 6 Englishi 词根

    9 pend/pends = hang 悬挂 depend   de 向下 independent   in 前缀 表否定: ent  adj后缀 suspend    sus=sub(便于发音) p ...

  10. nginx.conf 配置解析及常用配置

    本文为博主原创,未经允许不得转载: nginx.conf 配置文件配置解析 #定义 Nginx 运行的用户和用户组.默认nginx的安装用户为 nobody user www www: #启动进程,通 ...