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 相关文章推荐
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 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
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
database面试题
2013/03/28 面试题
创伤外科专业推荐信范文
2013/11/19 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
会计人员岗位职责
2014/03/19 职场文书
项目经理任命书
2014/06/04 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年村委会工作总结
2014/11/24 职场文书
行政诉讼答辩状
2015/05/21 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers