APP中javascript+css3实现下拉刷新效果


Posted in Javascript onJanuary 27, 2016

原生app里的数据列表都会使用下拉刷新的效果,在webapp里可以采用iscroll、swiper等插件或框架实现,那么如何自己编码实现类似的效果呢,下面介绍使用原生js+css3实现的简单效果。

html布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>test</title>
<style type="text/css" media="screen">
 body{margin: 0;}
 ul{list-style: none;padding: 0;}
 li{height: 30px;border-bottom: 1px solid #ddd;line-height: 30px;padding-left: 10px;}
 .scroller .loading{height: 60px;line-height: 60px;text-align: center;width: 100%;background-color: #f1f1f1;}
 .scroller{-webkit-overflow-scrolling:touch;}
</style> 
</head> 
<body > 
<div id="container" class="scroller" >
<div class="loading">
 下拉刷新数据
</div>
<ul>
 <li><a href="#">列表数据1</a></li>
 <li><a href="#">列表数据2</a></li>
 <li><a href="#">列表数据3</a></li>
 <li><a href="#">列表数据4</a></li>
 <li><a href="#">列表数据5</a></li>
 <li><a href="#">列表数据6</a></li>
 <li><a href="#">列表数据7</a></li>
 <li><a href="#">列表数据8</a></li>
 <li><a href="#">列表数据9</a></li>
 <li><a href="#">列表数据10</a></li>
 <li><a href="#">列表数据11</a></li>
 <li><a href="#">列表数据12</a></li>
 <li><a href="#">列表数据13</a></li>
 <li><a href="#">列表数据14</a></li>
 <li><a href="#">列表数据15</a></li>
 <li><a href="#">列表数据16</a></li>
 <li><a href="#">列表数据17</a></li>
 <li><a href="#">列表数据18</a></li>
 <li><a href="#">列表数据19</a></li>
 <li><a href="#">列表数据20</a></li>
 <li><a href="#">列表数据21</a></li>
 <li><a href="#">列表数据22</a></li>
 <li><a href="#">列表数据23</a></li>
 <li><a href="#">列表数据24</a></li>
 <li><a href="#">列表数据25</a></li>
 <li><a href="#">列表数据26</a></li>
 <li><a href="#">列表数据27</a></li>
 <li><a href="#">列表数据28</a></li>
 <li><a href="#">列表数据29</a></li>
 <li><a href="#">列表数据30</a></li>
</ul> 
</div>
<body>
</html>

js逻辑

var slide = function (option) {
 var defaults={
  container:'',
  next:function(){}
 }
 var start,
   end,
   length,
   isLock = false,//是否锁定整个操作
   isCanDo = false,//是否移动滑块
   isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
   hasTouch = 'ontouchstart' in window && !isTouchPad;
 var obj = document.querySelector(option.container);
 var loading=obj.firstElementChild;
 var offset=loading.clientHeight;
 var objparent = obj.parentElement;
 /*操作方法*/
 var fn =
 {
  //移动容器
  translate: function (diff) {
   obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
   obj.style.transform='translate3d(0,'+diff+'px,0)';
  },
  //设置效果时间
  setTransition: function (time) {
   obj.style.webkitTransition='all '+time+'s';
   obj.style.transition='all '+time+'s';
  },
  //返回到初始位置
  back: function () {
   fn.translate(0 - offset);
   //标识操作完成
   isLock = false;
  },
  addEvent:function(element,event_name,event_fn){
   if (element.addEventListener) {
    element.addEventListener(event_name, event_fn, false);
   } else if (element.attachEvent) {
    element.attachEvent('on' + event_name, event_fn);
   } else {
    element['on' + event_name] = event_fn;
   }
  }
 };

 fn.translate(0-offset);
 fn.addEvent(obj,'touchstart',start);
 fn.addEvent(obj,'touchmove',move);
 fn.addEvent(obj,'touchend',end);
 fn.addEvent(obj,'mousedown',start)
 fn.addEvent(obj,'mousemove',move)
 fn.addEvent(obj,'mouseup',end)

 //滑动开始
 function start(e) {
  if (objparent.scrollTop <= 0 && !isLock) {
   var even = typeof event == "undefined" ? e : event;
   //标识操作进行中
   isLock = true;
   isCanDo = true;
   //保存当前鼠标Y坐标
   start = hasTouch ? even.touches[0].pageY : even.pageY;
   //消除滑块动画时间
   fn.setTransition(0);
   loading.innerHTML='下拉刷新数据';
  }
  return false;
 }

 //滑动中
 function move(e) {
  if (objparent.scrollTop <= 0 && isCanDo) {
   var even = typeof event == "undefined" ? e : event;
   //保存当前鼠标Y坐标
   end = hasTouch ? even.touches[0].pageY : even.pageY;
   if (start < end) {
    even.preventDefault();
    //消除滑块动画时间
    fn.setTransition(0);
    //移动滑块
    if((end-start-offset)/2<=150) {
     length=(end - start - offset) / 2;
     fn.translate(length);
    }
    else {
     length+=0.3;
     fn.translate(length);
    }
   }
  }
 }
 //滑动结束
 function end(e) {
  if (isCanDo) {
   isCanDo = false;
   //判断滑动距离是否大于等于指定值
   if (end - start >= offset) {
    //设置滑块回弹时间
    fn.setTransition(1);
    //保留提示部分
    fn.translate(0);
    //执行回调函数
    loading.innerHTML='正在刷新数据';
    if (typeof option.next == "function") {
     option.next.call(fn, e);
    }
   } else {
    //返回初始状态
    fn.back();
   }
  }
 }
}
slide({container:"#container",next: function (e) {
 //松手之后执行逻辑,ajax请求数据,数据返回后隐藏加载中提示
 var that = this;
 setTimeout(function () {
  that.back.call();
 }, 2000);
}});

代码不是很多,细节还需完善。

Javascript 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
vue组件实现进度条效果
Jun 06 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 #Javascript
jQuery Easyui实现左右布局
Jan 26 #Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 #Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
详解javascript new的运行机制
Jan 26 #Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP高级OOP技术演示
2009/08/27 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
如何理解Python中的变量
2020/06/01 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers