webview里面的js下拉刷新

最新推荐文章于 2021-05-26 13:24:16 发布
最新推荐文章于 2021-05-26 13:24:16 发布
阅读量173 收藏
点赞数
分类专栏： js 文章标签： 下拉刷新 webview下拉刷新 js下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q821424508/article/details/84719579
版权

 

 比较仓促,

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

 

(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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型
jiguangcanhen的专栏
09-03 5816
WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型
Android Webview Js交互遇到的坑！！！
t1334311578的博客
12-22 8616
最近研究了一下webview的js交互问题，遇到了各种坑。现在就遇到的坑进行讲解一下，避免其他盆友遇到同样的坑不知所挫。1.需求：修改html中控件内容的值，如登录界面的用户名与密码自动输入问题。初始解决方法：通过webview设置webviewClient,并重新onpagefinished()方法，该方法在页面加载完成后会调用，进行js注入还必须设置支持javascript脚本webView.
解决手机上页面返回但是页面js没有刷新的痛点（BFcache）
热门推荐
每天都记录一点点！
04-21 2万+
一些浏览器中返回按钮是直接使用缓存的，不会执行任何js代码，例如, 在提交的时候将按钮设置为loading状态，如果在提交成功后没有对按钮进行处理，那么返回后按钮依然是loading状态，这就很尴尬了。 原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache 《J
android webview 下拉刷新页面,【已解决】webview方式的标签页，部分页面不能下拉刷新...
weixin_29224309的博客
05-26 1382
详细问题描述使用上下两个webview的方式组织一个标签页，最下方webview有几个按钮，用于切换上方的webview。默认展示的那个webview可以进行下拉刷新操作。其他的webview无法进行下拉刷新操作。但是，所有的webview都可以进行上拉加载操作。附件中就是最简单的重现代码，可直接运行重现。通过chrome的inspect，打开不能下拉刷新的webview，在console中执行h...
webview 实现下拉刷新,只需要三步
u012431404的博客
08-07 4678
第一步 1、在需要刷新的页面配置     既是在div中配置id ，这个id既是 在2 中的container 的值 2、在自己的js文件中添加如下代码  pullRefresh : {     container:"#todoPull",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等     down : {
pulltorefresh实例
03-09
在Android开发中，上拉刷新，下拉加载在很多项目中被需求着，这个功能具体怎么实现呢，很简单，用一个第三方插件chrisbanes写的android-PullToRefresh库即可了，或者谷歌官方推出的SwipeRefreshLayout。 　个人觉得...
XploitWebView:XploitWebView是高级的webview android应用程序源代码-Android app source code
03-24
下拉刷新 开机画面 支持离线和在线javascript 应用程式评分 外部链接将会打开 轻量级apk 缓存以获得流畅的体验 文件和图片下载和上传支持 进度栏和更多... 如何配置以创建apk： gitclone 用android studio打开...
最接近原生APP体验的高性能前端框架（电商）
03-26
流畅体验 下拉刷新 为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上， DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时...
计算机毕业设计电商系统
04-12
3、流畅体验 下拉刷新 为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上， DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；...
WebView下拉刷新Demo
wangmenghao0820的博客
07-05 1007
这里是xml布局文件 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support
解决webview 刷新问题，返回刷新webview，webview 刷新不好使
u010207898的博客
12-18 1万+
@Override protected void onResume() { super.onResume(); if (webView != null) { webView.onResume(); //恢复pauseTimers状态 webView.resumeTimers(); webView.reload();...
加载(WebView)页面,调JS刷新数据
tuhuolong的专栏
06-04 5549
WebView.loadUrl():加载页面 WebView.loadUrl("javascript:function()");调用JS函数刷新数据
JS刷新页面location.reload()用法
把事情做的“恰如其分”
11-18 3924
在javascript编程中，多使用location.reload实现页面刷新。        reload = function(){ window.location.reload();      } onclick="reload();"  然后通过一个标签，设置 onclick 就可以调用了。 window.location.reload();
Android webview下拉刷新（加载带进度条）
阳光的博客
08-26 974
最近项目用到webview下拉刷新，第一想到用h5实现，由于效果不理想，所以想到Android v4包里的SwipeRefreshLayout包裹自定义带进度条的webview来实现。
android webview 上拉加载动画,Android 之WebView实现下拉刷新和其他相关刷新功能
weixin_39963744的博客
05-26 182
最近项目中需要用到WebView下拉刷新的功能，经过查找资料终于完成了此功能，现在拿出来和大家分享一下。希望对大家有所帮助。效果如下图：imageimage代码：activity.xmlxmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_pa...
webview向上滚动与下拉刷新冲突（X5WebView）
逗比小可爱的博客
06-07 6291
1、问题 最近项目中需要在webview添加个下拉刷新，继而出现了滑动冲突问题。使用swiperefreshLayout，webview（或者X5WebView）嵌套使用，webview下划滚动没有问题，但是上划滚动时，执行了swiperefreshLayout 的刷新动作，这并不是我想要的效果。需要效果：上划滚动时webview需能直接滚动。只有当webview上划滚动到顶部，才能触发swipe
webview 下拉刷新
最新发布
08-11
在WebView中实现下拉刷新，可以通过以下步骤： 1. 在布局文件中添加SwipeRefreshLayout控件，并将WebView作为其子视图。 ``` android:id="@+id/swipe_refresh" android:layout_width="match_parent" android:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值