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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
JavaScript对象属性操作实例解析
Feb 04 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使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
python实现猜单词游戏
2020/05/22 Python
利用python爬取有道词典的方法
2020/12/08 Python
如何写一个自定义标签
2012/12/28 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android