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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 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图像处理类代码分享
2012/01/19 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
php实现微信支付之企业付款
2018/05/30 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python3多线程知识点总结
2019/09/26 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
出生公证委托书
2014/04/03 职场文书
经典团队口号
2014/06/06 职场文书
中国世界遗产导游词
2015/02/13 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers