场景

有些时候,我们在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. 带你了解 HBase 数据模型和 HBase 架构

    摘要:HBase 是一个面向列的 NoSQL 数据库. 本文分享自华为云社区<HBase 架构:HBase 数据模型 & HBase 读/写机制>,作者: Donglian Lin ...

  2. Scala Http请求工具类

    import java.io.IOException import java.util import org.apache.http.client.ClientProtocolException im ...

  3. 火山引擎DataTester：无需研发人力，即刻开启企业A/B实验

    近日,火山引擎A/B测试平台-- DataTester 对产品内A/B实验的"可视化编辑器"进行了新的升级,对交互.预览.Xpath的层次结构视图等能力均做了优化.   据介绍,火 ...

  4. Neo4j Neo.TransientError.General.MemoryPoolOutOfMemoryError

    The allocation of an extra 4.0 MiB would use more than the limit 2.0 GiB. Currently using 2.0 GiB. d ...

  5. C#写日志工具类(新版)

    源码:https://gitee.com/s0611163/LogUtil 昨天打算把我以前写的一个C#写日志工具类放到GitHub上,却发现了一个BUG,当然,已经修复了. 然后写Demo对比了NL ...

  6. U64949 棋盘覆盖（二分图）| 二分图匹配总结

    https://ac.nowcoder.com/acm/contest/1062/B [题目] 给出一张n×n(n≤100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少1*2的多米诺骨牌进行掩盖 ...

  7. vue项目部署的最佳实践

    前言 使用vue.react.angular等技术开发过程中,我们都会遇到以下问题: 首屏加载慢 每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽) 这两个问题可以从很多方面进行优化,今天我 ...

  8. 腾讯视频客户端 MP4 下载

    腾讯视频直接使用客户端下载视频,得到的是 QLV 文件,这种加密视频文件只能通过腾讯视频客户端播放.最新版的腾讯客户端下载的 QLV 文件,使用各种转码软件都不能正常转码.从服务器下载的 TS 文件一 ...

  9. 14-TTL与非门的输入特性和输出特性

    TTL与非门的电压传输特性 传输特性 输入电压连续发生变化,输出电压发生什么变化?需要研究输出电压与输入电压之间的关系 输入小的时候,输出大的信号:输入大时候输出小信号 中间有截止和导通,需要过渡过程 ...

  10. phpcms : Uncaught Error: [] operator not supported for strings... 的解决方案

    打开/phpcms/modules/admin/classes/push_api.class.php,大概在约 141行, $fields_arr = $fields_value = ''; 将它改为 ...