为什么iscroll在手机里无法滑动呢?在pc需要滑动一两次才触动才会显示效果?
function pullDownAction () {
location.reload();
myScroll.refresh();
}
function pullUpAction () {
pullNumber++;
experimentList.param.pageNum=pullNumber;
getExperimentList();
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
// <-- Simulate network congestion, remove setTimeout from production!
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction();
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction();
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 100); }, false);
这段代码是仿照demo做的,我是要从后台一次取出五个表格数据,然后填充进来,上面是js文件的,下面是html
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownLabel">Pull down to refresh...</span>
</div>
<div id="thelist">
<!--这边是我插入表格的地方-->
</div>
<div id="pullUp">
<span class="pullUpLabel">Pull up to refresh...</span>
</div>
</div>
</div>
很奇怪,为什么初次加载这个页面的时候没有滚动条,要鼠标划几下或者拉几下才会出现滚动条呢?而且最重要的是他在手机上滑动不了当你手机页面刷新的时候,你才能滑动,而且部分被遮挡住了,刷新完毕又动不了,页面又僵硬住了 急求解答,谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
感觉配置里少参数啊,两个use~参数默认都是true所以不用写,而滚动条
不管是scrollbars还是fadeScrollbars好像都没看到?有遮挡的情况不知道是不是布局的问题……建议还是去看下文档吧,中文的可以去看极客学院那版的。