iscroll应用 --> 下拉加载核心代码
<script>
window.onload=function (){
let scroll=new IScroll('.parent', {
disableMouse: true,
disableTouch: false,
disablePointer: true,
scrollY: true,
probeType: 3
});
let oDropDown=document.getElementsByClassName('dropdown')[0];
let oLoadMore=document.getElementsByClassName('loadmore')[0];
let oParent=document.getElementsByClassName('parent')[0];
let oChild=document.getElementsByClassName('child')[0];
scroll.on('scroll', function (){
if(scroll.y>=50){
oDropDown.innerHTML='松手刷新';
}else{
oDropDown.innerHTML='下拉刷新';
}
if(-scroll.y-(oChild.offsetHeight-oParent.offsetHeight)>=50){
oLoadMore.innerHTML='松手加载';
}else{
oLoadMore.innerHTML='加载更多';
}
});
oParent.addEventListener('touchend', function (){
if(scroll.y>=50){
scroll.disable();
oChild.style.transition='0.6s all ease';
oChild.style.transform=`translateY(${oDropDown.offsetHeight}px)`;
oDropDown.innerHTML='<img height="20" src="loading.gif" />加载中...';
$.ajax({
url: '1.txt',
success(txt){
setTimeout(function (){
oChild.innerHTML=txt;
oChild.style.transform='translateY(0)';
function fnEnd(){
oChild.style.transition='none';
oChild.removeEventListener('transitionend', fnEnd, false);
scroll.y=0;
scroll.enable();
}
oChild.addEventListener('transitionend', fnEnd, false);
oDropDown.innerHTML='';
}, 3000);
},
error(err){
alert('加载失败');
}
});
}
//scroll.scrollTo(0, oDropDown.offsetHeight, scroll.options.bounceTime);//另一种方法
}, false);
};
</script>
<style media="screen">
.parent {width:300px; height:400px; border:1px solid black; margin:50px auto 0; overflow:hidden; position:relative;}
.parent .child {width:300px; background:#FFF; position:relative; z-index: 999; overflow:hidden;}
.parent .dropdown {position:absolute; left: 0; top: 0; width:100%; text-align:center; line-height: 40px;}
.parent .loadmore {position:absolute; left: 0; bottom: 0; width:100%; text-align:center; line-height: 40px;}
</style>
<body>
<div class="parent">
<div class="child">
<p>2018年3月8日，鲁检君跟随山东省人民检察院公诉二处检察官程才和汤宁，前往“德州大学生遇害案”二审上诉庭审的现场，为您还原案件真相，揭秘背后的故事。</p>
<p>案发</p>
</div>
<div class="dropdown">下拉刷新</div>
<div class="loadmore">加载更多</div>
</div>
</body>
网友评论