场景

有些时候,我们在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. 手把手教你如何配置DBeaver对接FusionInsigth MRS Spark2x

    摘要:dbeaver是免费和开源为开发人员和数据库管理员通用数据库工具.本文介绍如何配置dbeaver对接FusionInsigth MRS Spark2x. 本文分享自华为云社区<DBeave ...

  2. vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

    对于drag事件不熟悉的,请先阅读:<drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践> 之前老项目grafana面板,如下图所示(GEM添加图表是直接到图表编辑, ...

  3. NettyHandler 常用生命周期方法

    NettyHandler 常用生命周期方法 @Component @ChannelHandler.Sharable //表示这里是线程安全的 public class ImServerHandler ...

  4. 声明式调用 —— SpringCloud OpenFeign

    Feign 简介 Spring Cloud Feign 是一个 HTTP 请求调用的轻量级框架,可以以 Java 接口注解的方式调用 HTTP 请求,而不用通过封装 HTTP 请求报文的方式直接调用 ...

  5. CMake 禁用 MSVC 编译警告 C4819

    warning C4819:该文件包含不能在当前代码页(936)中表示的字符.请将该文件保存为 Unicode 格式以防止数据丢失 if (win32) add_complie_options(/W4 ...

  6. MAVEN 配置和基本使用

    Maven 安装配置 解压 apache-maven-3.6.1.rar 既安装完成 配置环境变量 MAVEN_HOME 为安装路径的 bin 目录 在 Path 下添加 %MAVEN_HOME%\b ...

  7. 20级训练赛Round #5

    A - 凯少与素数 签到 & 思维题, 要使每一对数字 \((i,j)\) 的最大公约数都等于 1,简单来说区间相邻的两个数一定 \(gcd(i,j) = 1\) 并且 \((r - l)\) ...

  8. webpack配置自动打包相关的参数

  9. 使用docker compose 编排微服务发布

    本文为博主原创,未经允许不得转载: 目录: 1. compose 简介 2. compose 安装 3. 编写 docker-compose.yml 实现微服务发布 4. docker-compose ...

  10. 基于React开发的chatgpt网页版（仿chatgpt）

    在浏览github的时候发现了一个好玩的项目本项目,是github大神Yidadaa开发的chatgpt网页版,该开源项目是跨平台的,Web / PWA / Linux / Win / MacOS都可 ...