场景

有些时候,我们在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. 解读分布式调度平台Airflow在华为云MRS中的实践

    摘要:Airflow是一个使用Python语言编写的分布式调度平台,通过DAG(Directed acyclic graph 有向无环图)来管理任务. 本文分享自华为云社区<分布式调度平台Air ...

  2. 华为云GaussDB(for MySQL)2.0全新升级，三大技术大揭秘

    摘要:9月23日,在华为全联接2021主会场,华为高级副总裁.华为云CEO.消费者云服务总裁张平安发表"深耕数字化,一切皆服务"主题演讲,并发布了GaussDB(for MySQL ...

  3. Linux上非root用户jdk环境变量配置

    1.设置用户环境变量vi .bash_profile 或者是 vi ~/.bashrc 2.JAVA_HOME=/home/sgmm/jdk1.6.0_13 CLASSPATH=$JAVA_HOME/ ...

  4. Solon Aop 特色开发（3）构建一个Bean的三种方式

    Solon,更小.更快.更自由!本系列专门介绍Solon Aop方面的特色: <Solon Aop 特色开发(1)注入或手动获取配置> <Solon Aop 特色开发(2)注入或手动 ...

  5. Android Viewpager 滑动冲突解决

    这篇博客主要讲解一下几个问题 粗略地介绍一下View的事件分发机制 解决事件滑动冲突的思路及方法 ScrollView 里面嵌套ViewPager导致的滑动冲突 ViewPager里面嵌套ViewPa ...

  6. 【JAVA基础】List处理

    List处理 List使用Lists.partition()分片 public static <T> List<List<T>> partition(List< ...

  7. Codeforces Round #738 (Div. 2) (A~E)

    比赛链接:Here 1559A. Mocha and Math 题意: 给定一个区间,选择区间内的值执行 & 操作使得区间最大值最小化 观察样例发现:令 x = (1 << 30) ...

  8. 深入学习和理解 Redux

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/jhgQXKp4srsl9_VYMTZXjQ作者:曾超 Redux官网上是这样描述Redux, ...

  9. SetFitABSA: 基于 SetFit 的少样本、方面级情感分析

    SetFitABSA 是一种可以有效从文本中检测方面级情感的技术. 方面级情感分析 (Aspect-Based Sentiment Analysis,ABSA) 是一种检测文本中特定方面的情感的任务. ...

  10. 若依封装的request.js

    import axios from 'axios' import { Notification, MessageBox, Message } from 'element-ui' import stor ...