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

html部分

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

js逻辑

  1. var slide = function (option) {
  2. var defaults={
  3. container:'',
  4. next:function(){}
  5. }
  6. var start,
  7. end,
  8. length,
  9. isLock = false,//是否锁定整个操作
  10. isCanDo = false,//是否移动滑块
  11. isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
  12. hasTouch = 'ontouchstart' in window && !isTouchPad;
  13. var obj = document.querySelector(option.container);
  14. var loading=obj.firstElementChild;
  15. var offset=loading.clientHeight;
  16. var objparent = obj.parentElement;
  17. /*操作方法*/
  18. var fn =
  19. {
  20. //移动容器
  21. translate: function (diff) {
  22. obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
  23. obj.style.transform='translate3d(0,'+diff+'px,0)';
  24. },
  25. //设置效果时间
  26. setTransition: function (time) {
  27. obj.style.webkitTransition='all '+time+'s';
  28. obj.style.transition='all '+time+'s';
  29. },
  30. //返回到初始位置
  31. back: function () {
  32. fn.translate(0 - offset);
  33. //标识操作完成
  34. isLock = false;
  35. },
  36. addEvent:function(element,event_name,event_fn){
  37. if (element.addEventListener) {
  38. element.addEventListener(event_name, event_fn, false);
  39. } else if (element.attachEvent) {
  40. element.attachEvent('on' + event_name, event_fn);
  41. } else {
  42. element['on' + event_name] = event_fn;
  43. }
  44. }
  45. };
  46. fn.translate(0-offset);
  47. fn.addEvent(obj,'touchstart',start);
  48. fn.addEvent(obj,'touchmove',move);
  49. fn.addEvent(obj,'touchend',end);
  50. fn.addEvent(obj,'mousedown',start)
  51. fn.addEvent(obj,'mousemove',move)
  52. fn.addEvent(obj,'mouseup',end)
  53. //滑动开始
  54. function start(e) {
  55. if (objparent.scrollTop <= 0 && !isLock) {
  56. var even = typeof event == "undefined" ? e : event;
  57. //标识操作进行中
  58. isLock = true;
  59. isCanDo = true;
  60. //保存当前鼠标Y坐标
  61. start = hasTouch ? even.touches[0].pageY : even.pageY;
  62. //消除滑块动画时间
  63. fn.setTransition(0);
  64. loading.innerHTML='下拉刷新数据';
  65. }
  66. return false;
  67. }
  68. //滑动中
  69. function move(e) {
  70. if (objparent.scrollTop <= 0 && isCanDo) {
  71. var even = typeof event == "undefined" ? e : event;
  72. //保存当前鼠标Y坐标
  73. end = hasTouch ? even.touches[0].pageY : even.pageY;
  74. if (start < end) {
  75. even.preventDefault();
  76. //消除滑块动画时间
  77. fn.setTransition(0);
  78. //移动滑块
  79. if((end-start-offset)/2<=150) {
  80. length=(end - start - offset) / 2;
  81. fn.translate(length);
  82. }
  83. else {
  84. length+=0.3;
  85. fn.translate(length);
  86. }
  87. }
  88. }
  89. }
  90. //滑动结束
  91. function end(e) {
  92. if (isCanDo) {
  93. isCanDo = false;
  94. //判断滑动距离是否大于等于指定值
  95. if (end - start >= offset) {
  96. //设置滑块回弹时间
  97. fn.setTransition(1);
  98. //保留提示部分
  99. fn.translate(0);
  100. //执行回调函数
  101. loading.innerHTML='正在刷新数据';
  102. if (typeof option.next == "function") {
  103. option.next.call(fn, e);
  104. }
  105. } else {
  106. //返回初始状态
  107. fn.back();
  108. }
  109. }
  110. }
  111. }
  112. slide({container:"#container",next: function (e) {
  113. //松手之后执行逻辑,ajax请求数据,数据返回后隐藏加载中提示
  114. var that = this;
  115. setTimeout(function () {
  116. that.back.call();
  117. }, 2000);
  118. }});

代码不是很多,细节还需完善。此次的学习结果是参考http://www.111cn.net/wy/js-ajax/87990.htm这篇文章完成