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判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
Angular排序实例详解
Jun 28 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
Javascript 解构赋值详情
Nov 17 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
vue多次循环操作示例
2019/02/08 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
服装公司总经理岗位职责
2013/11/30 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
党员一帮一活动总结
2014/07/08 职场文书
合作意向书
2014/07/30 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
小学教师工作总结2015
2015/04/07 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
导游词之山东孔庙
2019/11/04 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Java实现注册登录跳转
2022/06/16 Java/Android
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技