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 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
jquery高效反选具体实现
May 05 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
微信小程序 开发之全局配置
May 05 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
ThinkPHP安装和设置
2015/07/27 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
js 颜色选择插件
2017/01/23 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python列表解析操作实例总结
2020/02/26 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
旅游与环境专业求职信
2014/06/05 职场文书
工资证明范本
2015/06/12 职场文书