jQuery模拟原生态App上拉刷新下拉加载更多页面及原理


Posted in Javascript onAugust 10, 2015

很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来.
下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码。
请看下面效果图:

jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

在线预览    源码下载

html代码:

<div id="wrapper">
 <ul>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
  <li>row </li>
 </ul>
 </div>
 <script>
 for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
  document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
 }
 refresher.init({
  id: "wrapper",//<------------------------------------------------------------------------------------┐
  pullDownAction: Refresh,
  pullUpAction: Load
 });
 var generatedCount = ;
 function Refresh() {
  setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
  var el, li, i;
  el = document.querySelector("#wrapper ul");
  el.innerHTML = '';
  for (i = ; i < ; i++) {
   li = document.createElement('li');
   li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
   el.insertBefore(li, el.childNodes[]);
  }
  wrapper.refresh();/****remember to refresh after action completed! ---yourId.refresh(); ----| ****/
  for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
   document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
  }
  }, );
 }
 function Load() {
  setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
  var el, li, i;
  el = document.querySelector("#wrapper ul");
  for (i = ; i < ; i++) {
   li = document.createElement('li');
   li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
   el.appendChild(li, el.childNodes[]);
  }
  wrapper.refresh();/****remember to refresh after action completed!!! ---id.refresh(); --- ****/
  for (var i = ; i < document.querySelectorAll("#wrapper ul li").length; i++) {
   document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
  }
  }, );
 }
 </script>

下拉刷新和上拉加载更多原理详解,具体介绍通过代码分析。

代码如下:

// 下拉刷新的原理 
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView 
{ 
 if (scrollView.contentOffset.y < - 100) { 
  
 [UIView animateWithDuration:1.0 animations:^{ 
  
  // frame发生偏移,距离顶部150的距离(可自行设定) 
  self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f); 
 } completion:^(BOOL finished) { 
  
  /** 
  * 发起网络请求,请求刷新数据 
  */ 
 
 }]; 
 } 
} 

// 上拉加载的原理 
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 
{ 
 NSLog(@"%f",scrollView.contentOffset.y); 
 NSLog(@"%f",scrollView.frame.size.height); 
 NSLog(@"%f",scrollView.contentSize.height); 
 /** 
 * 关键--> 
 * scrollView一开始并不存在偏移量,但是会设定contentSize的大小,所以contentSize.height永远都会比contentOffset.y高一个手机屏幕的 
 * 高度;上拉加载的效果就是每次滑动到底部时,再往上拉的时候请求更多,那个时候产生的偏移量,就能让contentOffset.y + 手机屏幕尺寸高大于这 
 * 个滚动视图的contentSize.height 
 */ 
 if (scrollView.contentOffset.y + scrollView.frame.size.height >= scrollView.contentSize.height) { 
 NSLog(@"%d %s",__LINE__,__FUNCTION__); 
 [UIView commitAnimations]; 
 [UIView animateWithDuration:1.0 animations:^{ 
  // frame发生的偏移量,距离底部往上提高60(可自行设定) 
  self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0); 
 } completion:^(BOOL finished) { 
  /** 
  * 发起网络请求,请求加载更多数据 
  * 然后在数据请求回来的时候,将contentInset改为(0,0,0,0) 
  */ 
 }]; 
 } 
}

以上内容就是本文针对jQuery模拟原生态App上拉刷新下拉加载更多页面及原理详解,希望对大家有所帮助。

Javascript 相关文章推荐
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
小程序Request的另类用法详解
Aug 09 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 #Javascript
javascript实现连续赋值
Aug 10 #Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 #Javascript
js中的内部属性与delete操作符介绍
Aug 10 #Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 #Javascript
javascript中对变量类型的判断方法
Aug 09 #Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 #Javascript
You might like
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Java及python正则表达式详解
2017/12/27 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
用python计算文件的MD5值
2020/12/23 Python
python如何调用php文件中的函数详解
2020/12/29 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
合作协议书模板
2014/10/10 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
财务会计岗位职责
2015/02/03 职场文书
病假证明模板
2015/06/19 职场文书