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代码
uchEventStart = function(){
var that = this;
return function(e){
if ( that.isRefreshing || ing ) {
that.canMove = false;
}else{
that.Vue.util.isAndroid && e.preventDefault();
that.canMove = true;
that._y = e.targetTouches[0].pageY;
that.y = 0;
}
}
}
在⼿指触碰到屏幕的时候，我们canmove设定为true。
uchEventMove = function(){
var that = this;
return function(e){
if ( that.canMove && !ing ){
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.$freshOffsetHeight ){
that.isRefreshing = true;
moveto.call(this, that.slowSpeed(moveY));
that.$icon.classList.add('lazyscroll-rotate');
that.$title.innerHTML = that.$fresh.title;
that.$value.innerHTML = that.$;
}else{
that.isRefreshing = false;
moveto.call(this, moveY);
that.$ve('lazyscroll-rotate');
that.$title.innerHTML = that.$options.defaults.title;
that.$value.innerHTML = that.$;
}
}else{
that.soyie.windowTouchMoveDisabled = false;
that.isRefreshing = false;
moveto.call(this, moveY);
that.$ve('lazyscroll-rotate');
that.$title.innerHTML = that.$options.defaults.title;
that.$value.innerHTML = that.$;
}
}
}
}
在touchmove的时候，我们禁⽌掉window的touchmove。不过需要注意的是，下拉刷新的条件是，你的_x于x的距离moveY必须>0，并且body的scrolltop必须<=0。这⾥你可以做你⾃⼰的事情。我么使⽤
function moveto(height){
this.style.webkitTransform = 'translate3d(0,' + height + 'px,0)';
}
来跟随moveY的距离通过css3来移动整个节点。
uchEventEnd = function(){
var that = this;
return function(e){
if ( ing ) return;
that.canMove = false;
that._y = that.y = 0;
that.soyie.windowTouchMoveDisabled = false;
that.soyie.animationend(that.$root).then(function(){
if ( that.isRefreshing ){
if ( ing ) return;
that.$icon.innerHTML = that.$lease.icon;
that.$title.innerHTML = that.$lease.title;
that.$value.innerHTML = that.$;
}else{
(())();
}
});
that.$root.classList.add('layscroll-animate');html滚动效果代码
if ( that.isRefreshing ){
moveto.call(this, that.$freshOffsetHeight);
}else{
moveto.call(this, 0);
}
}
}
在touchend的时候释放window的touchmove事件，同时将canmove设置为false，将所有⽤到的数据变量设置为初始状态。
基本逻辑就是这样实现，你也可以通过这个逻辑来实现⼀套更加完美的下拉刷新功能，不过这⾥我推荐⼤家使⽤simplize来开发⼿机端的h5页⾯。git项⽬地址是：
这套框架优势在于路由中间件在前端页⾯的使⽤上。我么可以想express⼀样操作前端的路由，很⽅便。页⾯切换都⼏乎接近来原⽣。不过底层的数据驱动是⽤vuejs来写的。你们可以尝试下，效果体验⼀定能让你满意。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。