`

webview里面的js下拉刷新

    博客分类：
  • js
下拉刷新webview下拉刷新js下拉刷新 
阅读更多

 

 比较仓促,

先放上去吧,方面以后再来修改 

 

(function(jQuery,document){
		if(!jQuery){
			if(console.error){
				console.error("请先引入 jQuery.js");
			}
			return;
		}
		if(!document || !document.body){
			if(console.error){
				console.error("需要body加载完成之后在能执行pull.js");
			}
			return;
		}

		var b = document.body;
		var x,y,scrollTop;
		var isTouch,isPullDown=false,isPullUp=false;

		b.addEventListener("touchstart", function(evt){
			//console.log('touchstart');
			var touch = evt.touches[0]; //获取第一个触点
        	x = Number(touch.pageX); //页面触点X坐标
        	y = Number(touch.pageY); //页面触点Y坐标
        	scrollTop=b.scrollTop;
			isTouch=true;

			//console.log('x = ' + x);
			//console.log('y = ' + y);
		});
		b.addEventListener("touchend", function(evt){
			//console.log('touchend');
			isTouch=false;
			isPullDown=false;
			isPullUp=false;
		});
		b.addEventListener("touchmove", function(evt){
			//console.log('touchmove');

			var touch = evt.touches[0]; //获取第一个触点
        	var mx = Number(touch.pageX); //页面触点X坐标
        	var my = Number(touch.pageY); //页面触点Y坐标

			//console.log("isTouch = " + isTouch)
			//console.log("y-my = " + (y-my))
			//console.log("b.scrollTop = " + b.scrollTop);
			if(isTouch){
				if(my -y >30){
					if(b.scrollTop==0){
						if(!isPullUp){
							console.log("pullUp");
							isPullUp=true;
						}
					}
				}
				if( y-my > 100 ){
					if(scrollTop!=0 && scrollTop == b.scrollTop){
						if(!isPullDown){
							//console.log('my = ' + my);
							//console.log('y = ' + y);
							//console.log('scrollTop = ' + scrollTop);
							//console.log('b.scrollTop = ' + b.scrollTop);
							console.log("pullDown");
							isPullDown=true;
						}
					}
				}

			}
			
		});
})(jQuery,document)

 

 

-=----------------------------------------------------

修改了一下 

(function($){
		if(!$){
			if(console.error){
				console.error("请先引入 jQuery.js");
			}
			return;
		}
				
		var Pull= function(b,setting){
			if(!b){
				if(console.error){
					console.error("需要body加载完成之后在能执行pull.js");
				}
				return;
			}
			b = b[0];
			var settings=$.extend({},Pull.defaults,setting);

			var x,y,scrollTop;
			var isTouch,isPullDown=false,isPullUp=false;

			b.addEventListener("touchstart", function(evt){
				//console.log('touchstart');
				var touch = evt.touches[0]; //获取第一个触点
	        	x = Number(touch.pageX); //页面触点X坐标
	        	y = Number(touch.pageY); //页面触点Y坐标
	        	scrollTop=b.scrollTop;
				isTouch=true;

				//console.log('x = ' + x);
				//console.log('y = ' + y);
			});
			b.addEventListener("touchend", function(evt){
				//console.log('touchend');
				isTouch=false;
				isPullDown=false;
				isPullUp=false;
			});
			b.addEventListener("touchmove", function(evt){
				//console.log('touchmove');

				var touch = evt.touches[0]; //获取第一个触点
	        	var mx = Number(touch.pageX); //页面触点X坐标
	        	var my = Number(touch.pageY); //页面触点Y坐标

				//console.log("isTouch = " + isTouch)
				//console.log("y-my = " + (y-my))
				//console.log("b.scrollTop = " + b.scrollTop);
				if(isTouch){
					if(my -y >30){
						if(b.scrollTop==0){
							if(!isPullUp){
								if(settings.pullUp){
									settings.pullUp();
								}
								//console.log("pullUp");
								isPullUp=true;
							}
						}
					}
					if( y-my > 100 ){
						if(scrollTop!=0 && scrollTop == b.scrollTop){
							if(!isPullDown){
								//console.log('my = ' + my);
								//console.log('y = ' + y);
								//console.log('scrollTop = ' + scrollTop);
								//console.log('b.scrollTop = ' + b.scrollTop);
								if(settings.pullDown){
									settings.pullDown();
								}
								isPullDown=true;
							}
						}
					}

				}
				
			});
		}

		Pull.defaults={
				pullDown:function(){
					if(console.log){
						console.log("pullDown")
					}
				},
				pullUp:function(){
					if(console.log){
						console.log("pullUp")
					}
				}

		}
		
		$.fn.Pull=function(settings){
			return new Pull(this,settings);
		};
})(jQuery)

 

 

<html>
	<head>
		<title>test</title>
		<meta name="viewport" content="width=640, user-scalable=yes,initial-scale=0.1,maximum-scale=0.1" /> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/jquery.min.js"></script>
		<script src="pull.js"></script>
		 <script type="text/javascript">
		 	$(document).ready(function(){
		 		var setting = {
		 			pullDown:function(){
		 				console.log("pullDown2");
		 			},
		 			pullUp:function(){
		 				console.log("pullUp2")
		 			}
		 		}
		 		$(document.body).Pull(setting);
		 	});
		 </script>
		<style type="text/css">
			body{
				text-align:center; margin:0 atuto; 
			}
			.container{
				overflow: auto;
			}
			.container div{
				line-height: 60px;
				font-size: 24px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
			<div><span>test</span><span>test</span>	</div>	<div><span>test</span><span>test</span>	</div>
		</div>
	</body>

</html>

 

 

 

只在chrome里测试了, chrome的测试方法,是打开chrome开发工具,点击开发工具工具栏最左边的手机模拟器图标 ,然后滑动 

 

 

分享到：
同一个项目中两个jqery版本共存的问题
评论
2 楼 q821424508 2015-07-15  
qingyuwell11 写道
为什么我下载下来不能用啊

怎么不能用，有错误吗 ？能贴个图吗 ？ 还有上拉好下拉，只是在控制台输出内容，并没有做其他操作，你看下控制台
1 楼 qingyuwell11 2015-07-14  
为什么我下载下来不能用啊
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android 之WebView实现下拉刷新和其他相关刷新功能

    有时候，为了提升用户体验，我们希望在WebView中实现下拉刷新的功能，就像原生的ListView或RecyclerView那样。本篇文章将深入探讨如何在Android的WebView中实现这一特性。 首先，下拉刷新是一种常见的用户界面设计...

    listView webView GridView 下拉刷新

    WebView主要用于加载和展示网页内容，其下拉刷新功能实现起来相对复杂，因为涉及到与JavaScript的交互。一种常见的做法是结合SwipeRefreshLayout和JavaScript Interface： 1. 创建一个自定义的WebView，继承自...

    webview下拉刷新

    "webview下拉刷新"这个话题涉及到如何为WebView添加下拉刷新的功能，以便用户在浏览内容时可以方便地更新页面。下拉刷新是一种常见的用户交互设计，常见于新闻、社交和邮件应用等，用户只需向下拖动屏幕顶部，即可...

    listview、scrollview、webview的下拉刷新上拉加载

    综上所述，ListView、ScrollView和WebView的下拉刷新和上拉加载是通过各种技术手段实现的，包括使用内置或第三方库，监听滚动事件，注入JavaScript接口等。开发者需要根据具体需求选择合适的方法，同时关注性能和...

    安卓webview顶部加载进度条提示,提供下拉刷新页面功能

    本篇文章将详细讲解如何在安卓Webview中添加顶部加载进度条提示以及实现下拉刷新页面的功能。 首先，我们来探讨Webview的顶部加载进度条。在默认情况下，Android的Webview并不显示加载进度，但用户通常希望看到页面...

    下拉刷新webview

    本项目名为"下拉刷新webview"，是一个实用的示例，旨在帮助开发者实现WebView组件的下拉刷新功能。 在Android开发中，实现WebView的下拉刷新通常需要结合其他库，如SwipeRefreshLayout。SwipeRefreshLayout是...

    iOS 下拉刷新WebView

    这个“iOS下拉刷新WebView”的主题就涉及到了如何在iOS应用中集成下拉刷新功能到WKWebView或者UIWebView上。 首先，我们要理解下拉刷新（Pull-to-Refresh）的基本概念。这是一种常见的用户界面设计模式，用户在滚动...

    ListView、gridView、scollView、WebView下拉刷新

    原生的WebView并不直接支持下拉刷新，所以我们需要借助JavaScript接口和Android的通信机制。首先，在WebView中注入JavaScript代码，监听滚动事件。当达到顶部时，通过WebView的addJavascriptInterface方法暴露一个...

    ListView、gridView、scollView、WebView下拉刷新 .

    虽然WebView本身不直接支持下拉刷新，但可以通过JavaScript与Java的交互实现。一种常见方法是监听WebView的滚动事件，当达到顶部时，通过执行JavaScript代码模拟下拉刷新。另一种方法是使用封装了刷新功能的WebView...

    android(ListView、GridView、WebView、Expandalbe、ScrollView)下拉刷新

    因为WebView自身不支持直接的下拉刷新，我们需要借助JavaScript接口和Android原生代码配合实现。可以创建一个自定义的WebViewClient，监听页面加载完成事件，然后注入JavaScript代码监听滚动事件。当用户滑动到顶部...

    webview刷新2

    【标题】"Webview刷新2"涉及到的是在Android开发中如何实现WebView的下拉刷新功能。WebView是Android系统提供的一种用于加载网页内容的组件，它可以让应用具备浏览网页的能力。然而，为了提升用户体验，通常我们需要...

    下拉刷新 上拉更多 支持ListView GridView WebView

    这些库提供了预设的动画效果和易于集成的API，使得在ListView、GridView以及（通过特殊方式）WebView上实现下拉刷新和上拉加载更多变得更加简单。同时，合理的数据加载策略和缓存机制也是优化性能的关键，例如使用...

    下拉刷新实现

    WebView的下拉刷新通常结合JavaScript与原生代码实现。可以使用JavaScript接口与Java代码通信，在用户下拉到页面顶部时触发刷新。具体步骤包括： 1. 注册JavaScript接口：在WebView中开启JavaScript，并注册一个...

    Android下拉刷新与上拉加载适用任何的view

    2. **WebView**：由于WebView自身不支持直接的下拉刷新和上拉加载，开发者需要通过JavaScript接口与Android原生代码进行通信，监听滚动事件并触发相应的加载操作。同时，可以创建一个自定义的Header视图来实现下拉...

    移动端下拉刷新和上拉加载更多原生插件

    例如，使用`WKWebView`（iOS）或`WebView`（Android），通过`WKUserContentController`或`WebChromeClient`的`addJavascriptInterface`方法，暴露接口给JavaScript调用，以便在触发下拉刷新和上拉加载时通知原生代码...

    上拉加载、下拉刷新的例子

    上拉加载和下拉刷新是移动应用开发中常见的交互设计，尤其在列表视图(ListView)、滚动视图(ScrollView)以及网页视图(WebView)中广泛应用。这种设计旨在优化用户体验，让用户能够方便地获取更多内容或更新信息，而...

    webview刷新很久之前写的

    与传统的下拉刷新控件不同，XRefreshView主要针对Webview进行了定制，旨在解决Webview刷新时可能出现的卡顿、延迟等问题。通过集成XRefreshView，开发者可以更轻松地实现Webview的下拉刷新和上拉加载更多功能，提升...

    Android各种列表控件上拉下拉刷新数据

    你可以通过监听WebView的滑动事件，或者利用JavaScript接口来实现上拉下拉刷新。通常，这需要与网页的前端交互，由前端触发刷新动作。 5. **ScrollView** ScrollView是基本的滚动视图，它可以包含单个垂直滚动的...

Magicbox
Global site tag (gtag.js) - Google Analytics