原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。
html布局
html>
<meta>
<meta><title>test</title><style>
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>
<p>
</p><p>
下拉刷新数据
</p>
- 列表数据1
- 列表数据2
- 列表数据3
- 列表数据4
- 列表数据5
- 列表数据6
- 列表数据7
- 列表数据8
- 列表数据9
- 列表数据10
- 列表数据11
- 列表数据12
- 列表数据13
- 列表数据14
- 列表数据15
- 列表数据16
- 列表数据17
- 列表数据18
- 列表数据19
- 列表数据20
- 列表数据21
- 列表数据22
- 列表数据23
- 列表数据24
- 列表数据25
- 列表数据26
- 列表数据27
- 列表数据28
- 列表数据29
- 列表数据30
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 <p></p><p>代码不是很多，细节还需完善。</p>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
