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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
Smarty Foreach 使用说明
2010/03/23 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
实习自我鉴定模板
2013/09/28 职场文书
最新党员的自我评价分享
2013/11/04 职场文书
毕业生就业自荐信
2013/12/04 职场文书
护士毕业生自荐信
2014/02/07 职场文书
校园标语大全
2014/06/19 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
爱护公物主题班会
2015/08/17 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书