移动端原声js + css3实现下拉刷新

最新推荐文章于 2022-01-24 14:20:24 发布

雷斯巴能

最新推荐文章于 2022-01-24 14:20:24 发布

阅读量1.9k

点赞数

分类专栏： JavaScript - Jquery CSS - CSS3 文章标签：下拉刷新

JavaScript - Jquery 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

CSS - CSS3

21 篇文章 0 订阅

订阅专栏

1、引入 jquery.js 和 nativePull.js 文件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/nativePull.js"></script>

2、加载下拉刷新Dom引擎HTML代码块

<!-- beginDown -->
<div class="pull_down" style="border:none;height: 100%;overflow: auto;">
<div class="loadinges" style="border: 0px #CCC solid;height: 3em;line-height: 3em;text-align: center;">
	下拉刷新数据
</div>
	具体需要手势下拉HTML代码块
<!-- endDown -->
</div>

3、初始化下拉

<script type="text/javascript">
//滚动加载，下拉
slide_({
 	container: ".pull_down",
 	next: function(e) {
 		// 初始化部分 标识数据
 		pullDown = "1";
 		var that = this;
 		//ajax请求数据，数据返回后隐藏加载中提示
 		setTimeout(function() {
 			that.back.call();
 			$(".loadinges").html("刷新成功！");
 		},1500);
 	}
});
</script>

测试demo 复制即可》》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>CSS3 + HTML5 下拉刷新</title>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/nativePull.js"></script>
	</head>
	<style>
		html {
			height: 100%;
			overflow: hidden;
		}
		body {
			height: 100%;
			margin: 0;
		}
		#base {
			height: 3rem;
			line-height: 3rem;
			background-color: #CCC;
			color: white;
			font-size: 1.2em;
			padding-left: 20px;
			border-bottom: 1px white solid;
		}
	</style>
	<body>
		<!-- beginDown -->
		<div class="pull_down" style="border:none;height: 100%;overflow: auto;">
		<div class="loadinges" style="border: 0px #CCC solid;height: 3em;line-height: 3em;text-align: center;">
			下拉刷新数据
		</div>
			
		<div id="base">Borther-Cola</div><div id="base">Borther-Cola</div><div id="base">Borther-Cola</div><div id="base">Borther-Cola</div>
		
		<!-- endDown -->
			</div>
			<script type="text/javascript">
				//滚动加载，下拉
				slide_({
				 	container: ".pull_down",
				 	next: function(e) {
				 		// 初始化部分 标识数据
				 		pullDown = "1";
				 		var that = this;
				 		//ajax请求数据，数据返回后隐藏加载中提示
				 		setTimeout(function() {
				 			that.back.call();
				 			$(".loadinges").html("刷新成功！");
				 		},1500);
				 	}
				});
			</script>
	</body>
</html>

nativePull.js 复制》》

 var isPageCando = 0; //定义手机是否在屏幕滑动 0:无滑动
 var slide_ = function(option) {
 	var defaults = {
 		container: '',
 		next: function() {}
 	}
 	var start,
 		end,
 		length,
 		isLock = false, //是否锁定整个操作
 		isCanDo = false, //是否移动滑块
 		isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
 		hasTouch = 'ontouchstart' in window && !isTouchPad;
 	var obj = document.querySelector(option.container);
 	var loading = obj.firstElementChild;
 	var offset = loading.clientHeight;
 	var objparent = obj.parentElement;

 	var fn = {
 		//移动容器
 		translate: function(diff) {
 			obj.style.webkitTransform = 'translate3d(0,' + diff + 'px,0)';
 			obj.style.transform = 'translate3d(0,' + diff + 'px,0)';
 		},
 		//设置效果时间
 		setTransition: function(time) {
 			obj.style.webkitTransition = 'all ' + time + 's';
 			obj.style.transition = 'all ' + time + 's';
 		},
 		//返回到初始位置
 		back: function() {
   			fn.translate(0 - offset);
 			//标识操作完成
 			isLock = false;
 		},
 		addEvent: function(element, event_name, event_fn) {
 			if(element.addEventListener) {
 				element.addEventListener(event_name, event_fn, false);
 			} else if(element.attachEvent) {
 				element.attachEvent('on' + event_name, event_fn);
 			} else {
 				element['on' + event_name] = event_fn;
 			}
 		}
 	};

 	fn.translate(0 - offset);
 	fn.addEvent(obj, 'touchmove', move); //当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
   	fn.addEvent(obj, 'touchstart', start); //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
   	fn.addEvent(obj, 'touchend', end); //当手指从屏幕上离开的时候触发
// 	fn.addEvent(obj, 'mousedown', start) //，隐藏或显示元素：
 	fn.addEvent(obj, 'mousemove', move) //获得鼠标指针在页面中的位置
   	fn.addEvent(obj, 'mouseup', end) //隐藏或显示元素：

 	//滑动开始
 	function start(e) {
 		//当前滚动条距离顶部的距离：$(".pull_down").scrollTop()
   		if($(".pull_down").scrollTop() <= 0 && !isLock) {
 			//标识操作进行中
   			isLock = true;
   			isCanDo = true;
 			var even = typeof event == "undefined" ? e : event;
 			//保存当前鼠标Y坐标
 			start = hasTouch ? even.touches[0].pageY : even.pageY;
 			//消除滑块动画时间
 			fn.setTransition(0);
 			loading.innerHTML = '下拉刷新数据';
   		}
   		return false;
 	}

 	//滑动中
 	function move(e) {
		if(objparent.scrollTop <= 0 && isCanDo) {
	 		isPageCando++;
			var even = typeof event == "undefined" ? e : event;
			if(isLock) {
	   			end = hasTouch ? even.touches[0].pageY : even.pageY;
			}
 			if(start < end) { //结束指针位置 大于 开始指针位置
 				even.preventDefault();
 				//消除滑块动画时间
// 				fn.setTransition(0);
 				//移动滑块
 				if((end - start - offset) / 2 <= 150) {
 					length = (end - start - offset) / 2;
 					fn.translate(length);
 				} else {
 					length += 0.3;
 					fn.translate(length);
 				}
 			}
 		}
 		
 	}
 	//滑动结束
 	function end(e) {
   		if(isCanDo) {
   			if(isPageCando > 0) {
   				//判断滑动距离大小
	   			if(end - start >= offset) {
	   				//设置滑块回弹时间
	   				fn.setTransition(1);
	   				//保留提示部分
	   				fn.translate(1);
	   				loading.innerHTML = '正在刷新数据...';
	   				if(typeof option.next == "function") {
	   					option.next.call(fn, e);
	   				}
	   			} else {
	   				//返回初始状态
	   				fn.back();
	   			}
	   			
   			}else {
   				fn.back();
   			}
   			
   			isPageCando = 0;
   			isCanDo = false;
			
   		}
 	}
 }