场景

有些时候,我们在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. 万亿养老市场如何抢占商机？云巢智慧康养物联网加速器，三招化解ISV痛点！

    摘要:云巢智慧康养物联网加速器,围绕ISV的种种痛点,提供快速上云.资源共享.商业合作等多方面的支持,助力企业成长,共建智慧康养物联网生态. 本文分享自华为云社区<万亿养老市场如何抢占商机?云巢 ...

  2. 一文详解特权访问管理（PAM）

    什么是特权访问管理(PAM)? 特权访问管理(Privileged Access Management)是一个包含网络安全策略和访问管理工具的解决方案,用于控制和监管和保护具有特权访问权限的用户.在之 ...

  3. 火山引擎 ByteHouse：TB 级数据下，如何实现高效、稳定的数据导入

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近期,火山引擎开发者社区.火山引擎数智平台(VeDI)联合举办以<数智化转型背景下的火山引擎大数据技术揭秘& ...

  4. Kubernetes(K8S) Pod 介绍

    Pod 是 k8s 系统中可以创建和管理的最小单元, 是资源对象模型中由用户创建或部署的最小资源对象模型, 也是在 k8s 上运行容器化应用的资源对象, 其他的资源对象都是用来支撑或者扩展 Pod 对 ...

  5. Vue3--使用脚手架创建一个vue应用，实现todolist

    一.安装脚手架,运行项目 1.1 安装,运行 首先安装 16.0 或更高版本的 Node.js 然后在cmd安装并执行 create-vue 它是 Vue 官方的项目脚手架工具 npm init vu ...

  6. 【Boost】boost.log 要点笔记

    常用简写: namespace logging = boost::log; namespace src = boost::log::sources; namespace expr = boost::l ...

  7. AcWing 第 13 场周赛  补题记录

    比赛链接:Here AcWing 3811. 排列 签到题, 先输出 \(n\) 然后输出 \(1\sim n -1\) 即可 AcWing 3812. 机器人走迷宫 不会什么特别高级的方法 qaq, ...

  8. 供应链安全情报 | cURL最新远程堆溢出漏洞复现与修复建议

    漏洞概述 cURL 是一个支持多种网络协议的开源项目,被广泛集成到自动化构建.网络测试.网络数据采集以及其他网络相关的任务中,备受开发者和系统管理员青睐. cURL在2023年10月11日下午紧急发布 ...

  9. 3 Englishi 词根

    1 -able 能..的:具有...性质的 useable moveable adaptable 2 -al  具有...性质的; 属于...的 personal natural regional - ...

  10. vue中form组件中上传el-upload（单、多附件上传，以及上传回显以及编辑不出现等问题）

    https://blog.csdn.net/weixin_46565787/article/details/121934075?spm=1001.2101.3001.6650.2&utm_me ...