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

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

html布局

test

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;}

下拉刷新数据

• 列表数据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 <= 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);

}});

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

本文原创发布php中文网，转载请注明出处，感谢您的尊重！