var
myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
function
pullDownAction () {
setTimeout(
function
() {
var
el, li, i;
el = document.getElementById(
'thelist'
);
for
(i=0; i<3; i++) {
li = document.createElement(
'li'
);
li.innerText =
'Generated row '
+ (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
}
myScroll.refresh();
}, 1000);
}
function
pullUpAction () {
setTimeout(
function
() {
var
el, li, i;
el = document.getElementById(
'thelist'
);
for
(i=0; i<3; i++) {
li = document.createElement(
'li'
);
li.innerText =
'Generated row '
+ (++generatedCount);
el.appendChild(li, el.childNodes[0]);
}
myScroll.refresh();
}, 1000);
}
function
loaded() {
pullDownEl = document.getElementById(
'pullDown'
);
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById(
'pullUp'
);
pullUpOffset = pullUpEl.offsetHeight;
myScroll =
new
iScroll(
'wrapper'
, {
scrollbarClass:
'myScrollbar'
,
useTransition:
false
,
topOffset: pullDownOffset,
onRefresh:
function
() {
if
(pullDownEl.className.match(
'loading'
)) {
pullDownEl.className =
''
;
pullDownEl.querySelector(
'.pullDownLabel'
).innerHTML =
'下拉刷新...'
;
}
else
if
(pullUpEl.className.match(
'loading'
)) {
pullUpEl.className =
''
;
pullUpEl.querySelector(
'.pullUpLabel'
).innerHTML =
'上拉加载更多...'
;
}
},
onScrollMove:
function
() {
if
(
this
.y > 5 && !pullDownEl.className.match(
'flip'
)) {
pullDownEl.className =
'flip'
;
pullDownEl.querySelector(
'.pullDownLabel'
).innerHTML =
'松手开始更新...'
;
this
.minScrollY = 0;
}
else
if
(
this
.y < 5 && pullDownEl.className.match(
'flip'
)) {
pullDownEl.className =
''
;
pullDownEl.querySelector(
'.pullDownLabel'
).innerHTML =
'下拉刷新...'
;
this
.minScrollY = -pullDownOffset;
}
else
if
(
this
.y < (
this
.maxScrollY - 5) && !pullUpEl.className.match(
'flip'
)) {
pullUpEl.className =
'flip'
;
pullUpEl.querySelector(
'.pullUpLabel'
).innerHTML =
'松手开始更新...'
;
this
.maxScrollY =
this
.maxScrollY;
}
else
if
(
this
.y > (
this
.maxScrollY + 5) && pullUpEl.className.match(
'flip'
)) {
pullUpEl.className =
''
;
pullUpEl.querySelector(
'.pullUpLabel'
).innerHTML =
'上拉加载更多...'
;
this
.maxScrollY = pullUpOffset;
}
},
onScrollEnd:
function
() {
if
(pullDownEl.className.match(
'flip'
)) {
pullDownEl.className =
'loading'
;
pullDownEl.querySelector(
'.pullDownLabel'
).innerHTML =
'加载中...'
;
pullDownAction();
}
else
if
(pullUpEl.className.match(
'flip'
)) {
pullUpEl.className =
'loading'
;
pullUpEl.querySelector(
'.pullUpLabel'
).innerHTML =
'加载中...'
;
pullUpAction();
}
}
});
setTimeout(
function
() { document.getElementById(
'wrapper'
).style.left =
'0'
; }, 800);
}
document.addEventListener(
'touchmove'
,
function
(e) { e.preventDefault(); },
false
);
document.addEventListener(
'DOMContentLoaded'
, loaded,
false
);
相关推荐
一、iScroll简介 iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,...二、iScroll使用方法 1.iScroll使用结构 最优化使用iScroll的结构一般如下所示: HTML: <li></li> ...
iScroll是一种高性能,小体积,无依赖性,跨平台的JS滚动...*删除未使用的变量*在标签名称不区分大小写检查新功能*新的`off`方法来卸载自定义事件*添加`options.deceleration`改变的势头持续时间/速度*新增发行说明文件
以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了。如果你英文比较好的话,可以看看官网的资料
iScroll.js 用法方法参考_.docx
基于iscroll.js做的小demo,拉下来就可以用,调用接口的方法也写了,把接口的url写上就可以用。希望可以帮助到大家。
大家在日常工作中最常用的插件...iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM,然后这个区域内的第一个DOM结构会被实例化,其包裹的内容可以纵向或者横向的滚动,所以在使用iScr
IScroll最简单的DOM结构: <li>... <li>... ...初始化设置使用实例: var myScroll = new IScroll('#wrapper', { mouseWheel: true, scrollbars: true }); 设置列表: 所属 属性名 说
Scroll 实例:下拉刷新,滚动翻页 下拉自动加载进行分页的运用越来越多,比起传统的分页该方法分页用户体验更好,布局也更简单了
主要为大家详细介绍了iscroll动态加载数据的完美解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
详细使用方法见页面,一个下拉内容,一个上滑显示更多内容 由于涉及到跨域请求的问题和保护第三方json数据的原因,请求url地址已经被去掉 所以预览可能会报错 使用方法: 1、将head中的样式引入到...
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回。很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了...
之前项目中的列表是采用的IScroll,但是在使用IScroll有一个问题就是:当内容不足全屏的时候,是木有办法往下拉的,这样就达不到刷新的目的了。【这是本人工作中遇到的,具体例子具体分析,这里只作一个参考】 大致...
本文主要介绍在HTML5中使用iScroll实现下拉刷新,上拉加载更多数据的方法,主要就是写了两个自定义函数pullDownAction和pullUpAction,分别在下拉和上拉的事件中调用他们。
其实解决这个方法很简单。iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。而在实际操作中,先执行了touchend,然后再执行了一次...
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,...下面这篇文章主要介绍了利用iscroll4实现轮播图效果的方法教程,需要的朋友可以参考下。