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

来源：懂视网责编：小采时间：2020-11-27 21:49:29

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

APP中javascript+css3实现下拉刷新效果:原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。html布局<!DOCTYPE html> <html> <h

推荐度：

点击下载本文 文档为doc格式

导读APP中javascript+css3实现下拉刷新效果:原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。html布局<!DOCTYPE html> <html> <h

原生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 > 
<p id="container" class="scroller" >
<p class="loading">
 下拉刷新数据
</p>
<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> 
</p>
<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= 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);
}});

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：刷新 js 效果

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐