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图片无缝、平滑滚动代码
Mar 11 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JavaScript脚本性能的优化方法
2007/02/02 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
2014年教师业务工作总结
2014/12/19 职场文书
诚信承诺书
2015/01/19 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python