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

站长资源 2025/10/28 佚名

45 1538 45

相思资源网 Design By www.200059.com

原生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" "undefined" "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,css3,下拉刷新

标签：

javascript,css3,下拉刷新

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“APP中javascript+css3实现下拉刷新效果”

暂无APP中javascript+css3实现下拉刷新效果的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

javascript,css3,下拉刷新

JavaScript+html5 canvas制作色彩斑斓的正方形效果

jQuery EasyUi实战教程之布局篇

评论“APP中javascript+css3实现下拉刷新效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接