iscroll上下拉动刷新问题解决方案
这段时间一直在研究iscroll,相信大家也都碰到过,官网上下拉动会上下同时刷新的问题
这是因为里面的判断不准确,要解决这个问题首先要了解两个属性的具体含义
y,maxScrollY
至于这个变量怎么定义呢,我一直没想好
但是我经过调试发现值变化的情况跟大家分享一下
maxScrollY值是固定的,应该就是容器的高度了,不过值为负也就是实际高度如果是400,那么值就是-400
y这个值调试的情况是这样的,如果当前层已经在顶部了再向下拖拽值大于0否则小于0
当当前层已经到了最底部继续往上拖拽的时候有
y<maxScrollY
下面给大家分享一下我开发中的一段代码
function listScrollMove(obj){
if (obj.y > 20 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
pullDownEl.style.display = "";
obj.minScrollY = 0;
} else if (obj.y > 0 && obj.y < 20) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
pullDownEl.style.display = "";
obj.minScrollY = 0;
} else if (obj.y < (obj.maxScrollY - 44) && !pullDownEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
pullUpEl.style.display = "";
obj.maxScrollY = obj.maxScrollY;
pullUpEl.style.display = "";
pullDownEl.style.display = "none";
} else if (obj.y < (obj.maxScrollY - 20) && obj.y > (obj.maxScrollY - 44)) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
pullUpEl.style.display = "";
pullDownEl.style.display = "none";
}else if((obj.y > 0 && obj.y < 20) ||(obj.y < obj.maxScrollY && obj.y > (obj.maxScrollY - 20))){
pullDownEl.className = '';
}
}
function listScrollEnd(obj){
if(Math.abs(obj.distY) > Math.abs(obj.distX)){//垂直拖动距离大于水平拖动距离
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(false); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
page++;
pullUpAction(false); // Execute custom function (ajax call?)
}else{
pullDownEl.style.display = "none";
}
}else{
if(obj.distX > 50){
myTran.goTo('myslide','reverse', '#page1', '#page2');
}
pullDownEl.style.display = "none";
}
}