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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
vue-model实现简易计算器
Aug 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
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
List Installed Hot Fixes
2007/06/12 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python实现图片转字符画的示例
2017/08/22 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
python Pexpect模块的使用
2020/12/25 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
教师学习心得体会范文
2016/01/21 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Go语言测试库testify使用学习
2022/07/23 Golang