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 相关文章推荐
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
原生JS实现九宫格抽奖
Sep 13 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
PHP-redis中文文档介绍
2013/02/07 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python访问系统环境变量的方法
2015/04/29 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python logging日志模块原理及操作解析
2019/10/12 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
scrapy-splash简单使用详解
2021/02/21 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
暂住证证明
2015/06/19 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书