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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
javascript parseInt 大改造
Sep 27 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
没有document.getElementByName方法
Aug 19 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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中PDO的错误处理
2011/09/04 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue的mixins属性详解
2018/03/14 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
js实现可爱的气泡特效
2020/09/05 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
python编写爬虫小程序
2015/05/14 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
建材投资建议书
2014/05/16 职场文书
中学政教处工作总结
2015/08/13 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android