JavaScript 下拉/上拉刷新

最新推荐文章于 2024-05-22 18:38:38 发布
最新推荐文章于 2024-05-22 18:38:38 发布
阅读量1k 收藏
点赞数
分类专栏： # JavaScript 自定义控件
转载请注明出处——https://blog.csdn.net/chy555chy
本文链接：https://blog.csdn.net/chy555chy/article/details/85054452
版权

在这里插入图片描述

<!DOCTYPE html> 
<html lang="zh-cn">
<head> 
<meta charset="UTF-8"> 
<title>Pull to Refresh</title>
<style>
* {
	margin: 0;
	padding: 0;
}
.scroll-container {
	position: relative;
	/** 拖动到最下面的时候滚动条会突然消失，造成页面resize，所以通过overflow隐藏滚动条 */
	overflow-y: hidden;
	/** height不能设置为100%，因为它是根据内容而定的，而100vh表示浏览器满高度 */
	height: 100vh;
}
.scroll-container>ul {
	list-style: none;
	text-align: center;
	line-height: 300%;
	color: white;
	position: absolute;
	width: 100%;
	background-color: #999;
}
.scroll-container>ul>li {
	border: 1px solid white;
}
.scroll-container>div:first-child, .scroll-container>div:last-child {
	justify-content: center;
	align-items: center;
	color: black;
	background-color: red;
	position: absolute;
	/** absolute的元素，如果不设置宽度，即使是block的也会变成wrap_content */
	width: 100%;
	overflow-y: hidden;
}
</style> 
<script>
function fullData(count, type) {
	console.log("refreshType: " + type);
	const container = document.querySelector(".scroll-container>ul");
	for(let i=0; i<count; i++) {
		const node = document.createElement("li");
		node.textContent = "第 " + container.children.length + " 条测试数据";
		container.appendChild(node);
	}
}
class PullToRefresh {
	constructor(scrollContainer, callback) {
		const container = scrollContainer.firstElementChild;
		const contentBefore = document.createElement("div");
		const contentEnd = document.createElement("div");
		scrollContainer.insertBefore(contentBefore, scrollContainer.firstChild);
		scrollContainer.appendChild(contentEnd);
		
		this.container = container;
		container.tips = ["Pull Down To Refresh", "Pull Up To Refresh", "Release To Refresh", "Loading...", "All Data Has Been Loaded"];
		//拉伸出多大的空间说明刷新有效
		container.effectDistance = 80;
		//拉伸出的空间的极限值
		container.tensileLimit = 100;
		//0表示不刷新，1表示下拉刷新，2表示上拉刷新
		container.refreshType = 0;
		//每次滚动的距离
		container.scrollStep = 20;
		container.pullToRefreshCallback = callback;
		container.siblingPrev = contentBefore;
		container.siblingNext = contentEnd;
		this.setListener(container);
	}
	setListener(container) {
		container.addEventListener('touchstart', this.touchStart, false);
		container.addEventListener('touchmove', this.touchMove, false);
		container.addEventListener('touchend', this.touchEndFunc, false);
		container.addEventListener('mousedown', this.touchStart, false);
		container.addEventListener('mousemove', this.touchMove, false);
		container.addEventListener('mouseup', this.touchEnd, false);
		//火狐使用DOMMouseScroll，其它浏览器使用mousewheel事件
		container.addEventListener("DOMMouseScroll", this.scroll, false);
		container.onmousewheel = this.scroll;
	}
	touchStart(event) {
		/*
		event.button
		其它浏览器：0鼠标左键;1鼠标中键;2鼠标右键
		IE浏览器: 1鼠标左键;4鼠标中键;2鼠标右键
		*/
		if(event.button === 0) {
			const container = event.currentTarget;
			container.isTouch = true;
			container.startY = event.y;
			container.startTop = container.offsetTop;
			container.refreshType = 0;
		}
	}
	touchMove(event) {
		const container = event.currentTarget;
		if(event.button === 0 && container.isTouch) {
			//从鼠标左键按下的点开始计算的下拉的距离
			const diff = event.y - container.startY;
			//容器与页面左上角的相对位移
			const containerTop = container.startTop + diff;
			if(diff > 0) {
				//下拉
				if(containerTop > container.tensileLimit) {
					return;
				} else if(containerTop > container.effectDistance) {
					container.siblingPrev.textContent = container.tips[2];
					container.siblingPrev.style.height = containerTop + "px";
					container.refreshType = 1;
				} else if(containerTop > 0) {
					container.siblingPrev.textContent = container.tips[0];
					container.siblingPrev.style.display = "flex";
					container.siblingPrev.style.height = containerTop + "px";
					container.refreshType = 0;
				} else {
					container.siblingPrev.style.display = "none";
					container.refreshType = 0;
				}
				container.style.top = containerTop + "px";
				container.siblingNext.style.display = "none";
			} else {
				//上拉
				/*
				container.clientHeight这个是容器完整的高度(包括不可见部分)
				document.documentElement.clientHeight这个是窗口实际高度
				*/
				//超出屏幕可见区域的高度值(正数)
				const exceedHeight = container.clientHeight - document.documentElement.clientHeight;
				//下面这个逻辑有点复杂，可以先分开写，然后寻找共同点并合并
				/*
				if(exceedHeight < 0) {
					//小于0表示内容未填满整个窗口
					if(containerTop + container.tensileLimit < 0) {
						return;
					} else if(containerTop + container.effectDistance < 0) {
						container.siblingNext.textContent = container.tips[2];
						container.siblingNext.style.height = -containerTop + "px";
						container.siblingNext.style.top = containerTop + container.clientHeight + "px";
						container.refreshType = 2;
					} else if(containerTop < 0) {
						container.siblingNext.textContent = container.tips[1];
						container.siblingNext.style.display = "flex";
						container.siblingNext.style.height = -containerTop + "px";
						container.siblingNext.style.top = containerTop + container.clientHeight + "px";
						container.refreshType = 0;
					} else {
						container.siblingNext.style.display = "none";
						container.refreshType = 0;
					}
				} else {
					if(containerTop + exceedHeight + container.tensileLimit < 0) {
						return;
					} else if(containerTop + exceedHeight + container.effectDistance < 0) {
						container.siblingNext.textContent = container.tips[2];
						container.siblingNext.style.height = containerTop + exceedHeight + "px";
						container.siblingNext.style.top = containerTop + container.clientHeight + "px";
						container.refreshType = 2;
					} else if(containerTop + exceedHeight < 0) {
						container.siblingNext.textContent = container.tips[1];
						container.siblingNext.style.display = "flex";
						container.siblingNext.style.height = containerTop + exceedHeight + "px";
						container.siblingNext.style.top = containerTop + container.clientHeight + "px";
						container.refreshType = 0;
					} else {
						container.siblingNext.style.display = "none";
						container.refreshType = 0;
					}
				}
				*/
				const tmpExceedHeight = exceedHeight < 0 ? 0 : exceedHeight;
				if(containerTop + tmpExceedHeight + container.tensileLimit < 0) {
					return;
				} else if(containerTop + tmpExceedHeight + container.effectDistance < 0) {
					container.siblingNext.textContent = container.tips[2];
					container.siblingNext.style.height = -containerTop - exceedHeight + "px";
					container.siblingNext.style.top = containerTop + container.clientHeight + "px";
					container.refreshType = 2;
				} else if(containerTop + tmpExceedHeight < 0) {
					container.siblingNext.textContent = container.tips[1];
					container.siblingNext.style.display = "flex";
					container.siblingNext.style.height = -containerTop - exceedHeight + "px";
					container.siblingNext.style.top = containerTop + container.clientHeight + "px";
					container.refreshType = 0;
				} else {
					container.siblingNext.style.display = "none";
					container.refreshType = 0;
				}
				
				container.style.top = containerTop + "px";
				container.siblingPrev.style.display = "none";
			}
		}
	}
	touchEnd(event) {
		if(event.button == 0) {
			const container = event.currentTarget;
			container.isTouch = false;
			if(container.offsetTop > 0) {
				container.style.top = "0";
			} else {
				const containerTop = container.clientHeight - document.documentElement.clientHeight;
				if(containerTop < 0) {
					//内容未填满整个窗口
					container.style.top = "0";
				} else if(container.offsetTop + containerTop < 0) {
					container.style.top = -containerTop + "px";
				}
			}
			container.siblingPrev.style.display = "none";
			container.siblingNext.style.display = "none";
			if(container.refreshType != 0) {
				container.pullToRefreshCallback(container.refreshType);
			}
		}
	}
	scroll(event) {
		const container = event.currentTarget;
		const containerTop = container.clientHeight - document.documentElement.clientHeight;
		if(containerTop < 0 || container.isTouch) {
			//小于0表示内容未填满整个窗口
			return;
		}
		const minTop = document.documentElement.clientHeight - container.clientHeight;
		let top = 0;
		//firefox用的是event.detail，+3表示为向下滚动，-3表示向上滚动；其它浏览器用的是wheelDelta，+120表示向上，-120表示向下
		if((event.detail && event.detail > 0) || (event.wheelDelta && event.wheelDelta < 0)) {
			top = container.offsetTop - container.scrollStep;
		} else {
			top = container.offsetTop + container.scrollStep;
		}
		top = Math.min(0, Math.max(minTop, top));
		container.style.top = top + "px";
	}
}
window.onload = ()=>{
	fullData(5, 0);
	const scrollContainer = document.querySelector('.scroll-container');
	new PullToRefresh(scrollContainer, (type)=>fullData(5, type));
}
</script>
</head>
<body>
<div class="scroll-container"><ul></ul></div>
</body> 
</html>
福州司马懿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MUI 上拉刷新/下拉加载功能实例代码
08-30
`down.callback`用于定义下拉刷新的回调函数，`up.callback`则用于上拉加载的回调函数。 3. **回调函数实现**：`pulldownRefresh()`和`pullupRefresh()`是两个关键的回调函数。`pulldownRefresh()`通常用来模拟数据...
小程序页面事件（下拉刷新和上拉触底）
qq_44741577的博客
03-08 354
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
uniapp如何实现下拉刷新以及上拉加载
programme_long的博客
04-11 1831
首先第一步，我们需要去pages.js中开启下拉刷新如下：👇开启之后，就可以实现下拉刷新了，这里使用到到这里如果可以实现了说明成功了，如果没有实现说明没有成功!这里俺遇到了一些问题顺便拿出来了（万一有像我一样的**也遇到了呢，嘿嘿）：当我下拉刷新释放的时候发现，刷新的图标还在自己慢悠悠的转动，这里使用到了。
如何实现上拉加载，下拉刷新？
最新发布
林恒的博客
05-22 924
下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助于对第三方库有更好的理解与使用。
小程序上拉加载、下拉刷新的使用方法
m0_61663332的博客
04-20 2592
小程序上拉加载、下拉刷新、分批次请求数据的使用方法。每次触底加载请求十条数据，提升用户体验，增加用户粘性。优化小程序页面加载速度，减少了页面加载时间。
vue 实现上拉加载下拉刷新（思路贼清晰）
热门推荐
菜得抠拇指
05-08 6万+
项目需要用到上拉刷新下拉加载 所以自己手动实现了一个 组件： &amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;quot;my-scroll&amp;amp;amp;amp;quot; ref=&amp;amp;amp;amp;quot;myScroll&amp;amp;amp
js 实现上拉加载和下拉刷新
青蛙king的博客
09-26 6886
一、js 实现上拉加载 实现上拉加载的原理：监听滚动条滑到页面底部，然后就去做一次请求数据。 window.onscroll = function () { const scrollH = document.documentElement.scrollHeight；// 文档的完整高度 const scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移 c
h5单页面上拉刷新下拉加载
10-16
本项目主要关注于实现这样的功能，结合了JavaScript和CSS技术，同时应用了tab选项卡的设计，使得用户能够在不同的内容区域进行上拉刷新和下拉加载。 1. **上拉刷新（Pull-to-Refresh）**： 上拉刷新是指当用户滚动...
上拉加载下拉刷新.zip
11-21
上拉加载和下拉刷新是现代网页和移动应用中常见的交互设计，主要用于处理大量数据的分页显示和界面更新。这两个功能在用户滚动到页面底部时加载更多内容（上拉加载），以及在用户滚动到页面顶部时刷新当前内容（下拉...
Qml上拉下拉刷新QmlUpDownRefresh.7z
07-20
在QML（Qt Quick）中实现上拉下拉刷新功能是一项常见的需求，特别是在开发移动应用或者桌面应用的列表视图时。QmlUpDownRefresh.7z这个压缩包可能包含了一个完整的解决方案，用于帮助开发者轻松地在QML界面中集成...
jquery 下拉刷新上拉加载
05-04
在网页开发中，"下拉刷新"和"上拉加载"功能已经成为现代用户界面不可或缺的部分，尤其是在处理大量数据或内容的列表时。这两个特性能够提供流畅的用户体验，使得用户可以轻松地查看更多的信息，而无需手动滚动到页面...
微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
Qianmoer的博客
08-02 6135
/ 自己定义刷新事件 var self = this;// 自己定义刷新事件 self . setData({triggered : true , // 将triggered属性设置为true，表示下拉刷新已经被触发 }) wx . showToast({title : "刷新成功" }) setTimeout(function() {triggered : false , // 将triggered属性设置为false，表示下拉刷新已完成 }) console . log('下拉刷新已完成')
上拉加载下拉刷新（微信开发者工具）
weixin_72324200的博客
12-15 363
生命周期函数--监听页面加载。
移动端，取消谷歌浏览器上滑刷新
qq_33759361的博客
03-24 984
取消移动端上滑刷新 大致思路 定义几个全局变量， let now_top_height, now_address, init_address // 当前距离顶部的高度，滑动后元素的坐标，滑动前元素的坐标 判断浏览器是是否向上滑动，判断是否已经到达页面顶部（因为只有当到达页面顶部的时候，才会触发上滑刷新）是否会影响浏览器正常的上下滑动。 // 开始滑动的坐标 document.addEventListener("touchstart", event => { // 查看滑动的时候，距离顶部的距离
uniapp 实现上拉加载下拉刷新
m0_53398323的博客
12-30 1927
【代码】uniapp 实现上拉加载下拉刷新。
iOS MJRefresh下拉、上拉刷新自定义以及系统详细讲解
abaodc2308的博客
05-04 263
更新： MJRefresh 更新功能，默认根据数据来源 自动显示 隐藏footer，这个功能可以关闭 DoctorTableView.mj_footer.automaticallyHidden = NO; 0图文效果demohttp://pan.baidu.com/s/1jHU8eua 提取密码 kmkp 一、...
原生js如何实现上拉加载下拉刷新？
weixin_62889848的博客
02-01 970
原生js如何实现上拉加载下拉刷新？
微信小程序的基本使用1:数据绑定同步,导航方式，导航传参，全局配置，下拉刷新，上拉触底等
HakerDONG的博客
01-10 960
微信小程序基本使用
JavaScript如何实现上拉加载，下拉刷新？
huihui_999的博客
04-24 465
用JavaScript实现上拉加载及下拉刷新
vue上拉加载下拉刷新
06-02
在 Vue 中实现上拉加载和下拉刷新常用的库有`better-scroll`和`vue-pull-to`等。 ## 使用 better-scroll 实现上拉加载和下拉刷新 1. 安装 better-scroll 库 ```bash npm install better-scroll -S ``` 2. 在需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值