HTML5实现全兼容的下拉刷新功能

HTML5实现全兼容的下拉刷新功能
前端⼀直有个技术有很少框架能够完美兼容，下拉刷新。

⾃从ios提出这个功能后，很多设备上都在效仿，但是在h5上，有不少都是通过iscroll实现的，不过在低端安卓上略显卡顿。

同时，iscroll体积的⼤⼩和button按钮的双点击bug也是让⼈苦不堪⾔。

现在，我们就⽤最简单的⽅式来实现⼿机上全兼容的下拉刷新。

下拉刷新最重要的点是window的touchmove和你下拉节点的touchmove之间的关系。

⾸先我们这么设定：
window.addEventListener('touchmove', function(e){
if ( window.cantouch ){
e.preventDefault();
}
});
只要我们改变window.cantouch的值，那么我们就能让window默认滚动事件禁⽌。

同时我们通过对节点的touch事件监听来控制整个下拉过程。

源码中我们能看到这样的touchstart代码
LazyScrollRefresh.prototype.touchEventStart = function(){
var that = this;
return function(e){
if ( that.isRefreshing || that.getting ) {
that.canMove = false;
}else{
that.Vue.util.isAndroid && e.preventDefault();
that.canMove = true;
that._y = e.targetTouches[0].pageY;
that.y = 0;
}
}
}
在⼿指触碰到屏幕的时候，我们canmove设定为true。

LazyScrollRefresh.prototype.touchEventMove = function(){
var that = this;
return function(e){
if ( that.canMove && !that.getting ){
that.y = e.targetTouches[0].pageY;
var moveY = that.y - that._y;
if ( moveY > 0 && document.body.scrollTop <= 0 ){
that.soyie.windowTouchMoveDisabled = true;
if ( moveY >= that.$options.refreshOffsetHeight ){
that.isRefreshing = true;
moveto.call(this, that.slowSpeed(moveY));
that.$icon.classList.add('lazyscroll-rotate');
that.$title.innerHTML = that.$options.refresh.title;
that.$value.innerHTML = that.$options.refresh.text;
}else{
that.isRefreshing = false;
moveto.call(this, moveY);
that.$icon.classList.remove('lazyscroll-rotate');
that.$title.innerHTML = that.$options.defaults.title;
that.$value.innerHTML = that.$options.defaults.text;
}
}else{
that.soyie.windowTouchMoveDisabled = false;
that.isRefreshing = false;
moveto.call(this, moveY);
that.$icon.classList.remove('lazyscroll-rotate');
that.$title.innerHTML = that.$options.defaults.title;
that.$value.innerHTML = that.$options.defaults.text;
}
}
}
}
在touchmove的时候，我们禁⽌掉window的touchmove。

不过需要注意的是，下拉刷新的条件是，你的_x于x的距离moveY必须>0，并且body的scrolltop必须<=0。

这⾥你可以做你⾃⼰的事情。

我么使⽤
function moveto(height){
this.style.webkitTransform = 'translate3d(0,' + height + 'px,0)';
}
来跟随moveY的距离通过css3来移动整个节点。

LazyScrollRefresh.prototype.touchEventEnd = function(){
var that = this;
return function(e){
if ( that.getting ) return;
that.canMove = false;
that._y = that.y = 0;
that.soyie.windowTouchMoveDisabled = false;
that.soyie.animationend(that.$root).then(function(){
if ( that.isRefreshing ){
if ( that.getting ) return;
that.getting = true;
that.$icon.innerHTML = that.$options.release.icon;
that.$title.innerHTML = that.$options.release.title;
that.$value.innerHTML = that.$options.release.text;
that.emit('refreshing', that.next(that.$root));
}else{
(that.next())();
}
});
that.$root.classList.add('layscroll-animate');
if ( that.isRefreshing ){
moveto.call(this, that.$options.refreshOffsetHeight);
}else{
moveto.call(this, 0);
}
}
}
在touchend的时候释放window的touchmove事件，同时将canmove设置为false，将所有⽤到的数据变量设置为初始状态。

基本逻辑就是这样实现，你也可以通过这个逻辑来实现⼀套更加完美的下拉刷新功能，不过这⾥我推荐⼤家使⽤simplize来开发⼿机端的h5页⾯。

git项⽬地址是：
这套框架优势在于路由中间件在前端页⾯的使⽤上。

我么可以想express⼀样操作前端的路由，很⽅便。

页⾯切换都⼏乎接近来原⽣。

不过底层的数据驱动是⽤vuejs来写的。

你们可以尝试下，效果体验⼀定能让你满意。