iscroll上下拉动刷新问题解决方案

hhhddd123 2013-10-10 06:39:06
这段时间一直在研究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";
}
}
...全文
415 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧