webview里面的js下拉刷新

最新推荐文章于 2020-10-12 19:30:52 发布
最新推荐文章于 2020-10-12 19:30:52 发布
阅读量851 收藏
点赞数
分类专栏： js下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q821424508/article/details/46564417
版权

 

 比较仓促,

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

 

(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开发工具,点击开发工具工具栏最左边的手机模拟器图标 ,然后滑动 

 

 

q821424508
关注
专栏目录
android webview 下拉刷新页面,Android 下拉刷新控件SwipeRefreshLayout结合WebView使用
weixin_36382155的博客
05-26 798
SwipeRefreshLayout 是谷歌官方下拉刷新控件，4.0如下的版本须要用到 android-support-v4.jar包才能用到htmlandroid-support-v4.jar 包下载地址：输入连接说明java官网API地址：输入连接说明androidGitHub Demo下载地址：输入连接说明git SwipeRefreshLayout 使用起来是很是简单的，只须要在能够滑动的...
Android 之WebView实现下拉刷新和其他相关刷新功能
04-14
WebView实现下拉刷新功能和其他控件下拉刷新功能，博客地址：http://blog.csdn.net/dickyqie/article/details/70170855
【Android】可以下拉刷新的webview，使你的webview效果更加好看，封装自己的WebView
技术博客
10-20 6214
作者：程序员小冰 （转载请说明出处）博客地址：http://blog.csdn.net/qq_21376985长期维护的Android项目，里面包括常用功能实现，以及知识点详解， 当然还有Java中的知识点。具体请看github：https://github.com/QQ986945193/DavidAndroidProjectTools今天带大家做一个可以下拉刷新的自定义WebView，首先先看一
webview的下拉刷新
02-10
通过下拉webview实现重现加载页面，和tableview的下拉刷新原理一样
WebView 下拉刷新
一航jason
08-24 934
下拉刷新已经是非常常见的效果了，那么也有很多优秀的控件。 这里分享的是用refreshlayout 思想开发自定义控件。 优点代码更加简洁，修改起来更加方便。 源码： public class WebViewRefreshLayout extends LinearLayout implements OnTouchListener { RelativeLayout heade
Android webview 下拉刷新
JimTrency的博客
11-02 2239
今天由于业务需要，需要对webview下来刷新，但webview肯定没这功能呀，于是就想，在用xlistview把webview放在头部，下拉webview时，就重新加载webview，但这样说不定，可能照成滑动冲突。于是，在stack overflow找到了不错的解决方案。SwipeRefreshLayout 是谷歌官方下拉刷新控件，4.0以下的版本需要用到 Android-support-v4
webview下拉刷新
08-28
在WebView中实现下拉刷新，可以提升应用的交互性和用户体验。 一、WebView基础 1. WebView的引入：在AndroidManifest.xml中添加Internet权限，并在布局文件中添加WebView组件。通过Java代码实例化WebView对象，并...
WebView下拉刷新Demo
liujing1016的博客
07-28 694
这里是xml布局文件 [java] view plain copy print? <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height
使用 android-Ultra-Pull-To-Refresh 实现 WebView 下拉刷新
u011125077的博客
12-26 1052
实现 WebView 下拉刷新
android开发WebView下拉刷新
09-07
SwipeRefreshLayout和腾讯的X5内核的WebView相结合的下拉刷新，亲测华为荣耀android6.0 测试通过，由于百度某些页面单独处理过，开启了滚动条，否则下拉和下拉刷新冲突..2016年9月7日19:40:50
自定义SwipeRefreshLayout实现WebView下拉刷新
12-03
自定义SwipeRefreshLayout实现WebView下拉刷新,博客地址：http://blog.csdn.net/gesanri/article/details/50149059
web-view下拉刷新
small_animation的博客
10-12 270
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div class="box"> <div c
自定义可下拉刷新的WebView
Lynn
10-15 3081
自定义可下拉刷新的WebView的主要难点在于：监听WebView是否滚动到顶部，因为我是使用google提供的SwipeRefreshLayout实现，所以当webview不处于顶部时，下拉依然刷新，导致一旦将webview上滑之后无法回滑到顶部（被SwipeRefreshLayout获取并刷新）。下面是具体实现逻辑。1，新建一个类继承自WebView，重写onScrollChanged()方法p
PullRefreshLayout+WebView实现下拉刷新
qypcyj的博客
05-19 1142
PullRefreshLayout：跟SwipeRefreshLayout功能差不多的一款下拉刷新控件。 项目地址：https://github.com/baoyongzhang/android-PullRefreshLayout 使用的方法跟SwipeRefreshLayout类似。 首先在xml文件中定义，包裹需要下拉刷新的view，listview、RecylerView、
WebView下拉刷新实现收藏
taotao0001tao的博客
04-10 387
WebView+SmartRefreshLayout实现下拉刷新 地址：https://www.jianshu.com/p/89321c062808 其他 地址：https://www.cnblogs.com/zhangqie/p/6705466.html
RecyclerView中嵌套WebView时下拉刷新总是定位到WebView顶部
Pillar的专栏
03-18 786
1、问题描述：RecyclerView中嵌套X5WebView时下拉刷新总是定位到WebView顶部 2、解决办法： 在包含X5WebView父布局的根布局中添加： android:descendantFocusability=“blocksDescendants” ...
基于java的共享汽车管理系统的开题报告2.docx
最新发布
09-25
基于java的共享汽车管理系统的开题报告2.docx
webview 下拉刷新
08-11
### 回答1： 在WebView中实现下拉刷新，可以通过以下步骤： 1. 在布局文件中添加SwipeRefreshLayout控件，并将WebView作为其子视图。 ``` <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swipe_refresh" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> ``` 2. 在Activity或Fragment中，获取SwipeRefreshLayout和WebView的实例，并为SwipeRefreshLayout设置下拉刷新监听器。 ``` SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.swipe_refresh); WebView webView = findViewById(R.id.web_view); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { webView.reload(); } }); ``` 3. 在WebView的WebViewClient中，重写onPageFinished方法，当页面加载完成时，停止SwipeRefreshLayout的刷新动画。 ``` webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); swipeRefreshLayout.setRefreshing(false); } }); ``` 这样，当用户下拉SwipeRefreshLayout时，会触发onRefresh方法，从而重新加载WebView中的页面，并在页面加载完毕后停止刷新动画。 ### 回答2： WebView 下拉刷新是在使用 WebView 控件时，实现下拉刷新页面内容的功能。下拉刷新通常用于在 WebView 中加载新的内容或更新已有的内容。 实现 WebView 下拉刷新的一种常见方式是使用下拉刷新控件，例如 SwipeRefreshLayout。这个控件可以包裹 WebView，并且在用户下拉 WebView 时触发刷新操作。具体代码如下： 首先，在 XML 布局文件中将 WebView 包裹在 SwipeRefreshLayout 中： ```xml <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> ``` 然后，在 Java 代码中设置下拉刷新的监听器，并在刷新时重新加载 WebView 内容： ```java SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.swipeRefreshLayout); WebView webView = findViewById(R.id.webView); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { webView.reload(); // 刷新 WebView 内容 swipeRefreshLayout.setRefreshing(false); // 停止刷新动画 } }); ``` 以上代码中，`swipeRefreshLayout.setOnRefreshListener` 方法用于设置下拉刷新的监听器，当用户下拉时，会回调 `onRefresh` 方法。在这个方法中，我们通过 `webView.reload()` 方法重新加载 WebView 内容，之后调用 `swipeRefreshLayout.setRefreshing(false)` 方法停止刷新动画。 通过以上的步骤，我们就可以在 WebView 中实现下拉刷新的功能了。用户在 WebView 上下拉时，会触发刷新动画，并在刷新时重新加载 WebView 内容，使用户能够获取最新的页面内容。 ### 回答3： 在WebView中实现下拉刷新可以通过结合SwipeRefreshLayout和WebView来实现。 首先，在布局文件中添加SwipeRefreshLayout布局和WebView布局，如下所示： ```xml <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/refresh_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v4.widget.SwipeRefreshLayout> ``` 然后，在代码中找到SwipeRefreshLayout和WebView的实例，并设置下拉刷新监听器和WebView的WebChromeClient，如下所示： ```java SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.refresh_layout); final WebView webView = findViewById(R.id.webview); // 设置下拉刷新监听器 swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { // 在这里执行刷新操作，比如重新加载网页 webView.reload(); } }); webView.setWebChromeClient(new WebChromeClient() { @Override public void onProgressChanged(WebView view, int newProgress) { // 在页面加载完成后停止刷新 if (newProgress == 100) { swipeRefreshLayout.setRefreshing(false); } } }); ``` 在下拉刷新监听器中，可以执行刷新操作，比如重新加载网页。当WebView加载完成后，通过setRefreshing(false)停止刷新。 这样，用户在WebView界面中下拉屏幕时，就能触发下拉刷新操作，并重新加载WebView中的网页内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值