首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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);
}});

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

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

- Author -

lihualong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
javascript常见用法总结
May 22 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
react native 获取地理位置的方法示例
Aug 28 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
生成缩略图(1) 负载均衡(6) 反向代理(2) reload(1) 防盗链(1) shell(3) 默认端口(3) 前后端分离(1) http(6) 动静分离(1)
You might like
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python实现二分查找算法实例
2015/05/26 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
详解Python pygame安装过程笔记
2017/06/05 Python
itchat接口使用示例
2017/10/23 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python3常用内置方法代码实例
2019/11/18 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
中学老师的自我评价
2013/11/07 职场文书
高中生活自我鉴定
2014/01/18 职场文书
网络研修随笔感言
2014/02/17 职场文书
干部下基层实施方案
2014/03/14 职场文书
初三学生个人自我评定
2014/04/06 职场文书
经济管理专业求职信
2014/06/09 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
工作保证书
2015/01/17 职场文书