js下拉加载更多-详解

场景
有些时候,我们在pc端经常会遇见滚动到底部的时候,去加载下一页的数据,
这个时候,我们就需要知道滚动条什么时候触底了,
如果触底了,就去加载下一页的数据;
在触底的过程中,我们需要注意的是,防止数据堆叠;

<style type="text/css">
	.bottom-content{
		height: 500px;
		 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>

作者：明月人倚楼
出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。