一、iscroll的注意事项
1、iscroll4和iscroll5的共同点:最少实现三层嵌套,父级元素加定位;
2、iscroll4在new 申明时iScroll中i要小些,只能使用id命名;
3、iscroll5在new申明时IScroll中的I要大写,可以使用class和id,咋申明时要用“.class”或“#id”
引入的文件:
<link rel="stylesheet" href="css/style.css"> | |
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> | |
<script src="js/iscroll.js"></script> |
img {
max-width: 100%;
}
}
header{
height: 4rem;
background-color: #e93038;
text-align: center;
color: #fff;
line-height: 4rem;
}
footer{
height: 4rem;
background-color: #e93038;
text-align: center;
color: #fff;
line-height: 4rem;
position: absolute;
bottom: 0;
width: 100%;
}
#wrapper{
width: 100%;
position: absolute;
left: 0;
top: 4rem;
bottom: 4rem;
overflow: hidden;
z-index: 1;
background-color: #ccc;
}
#wrapper li{
height: 10rem;
line-height: 10rem;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,.1);
}
.more{
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
color: #333;
}
.pull_icon{
width: 25px;
height: 25px;
background-image: url('../images/pull.png');
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
transition: all .5s;
}
.more span{
padding-left: .5rem;
}
.scroller{
background-color: #fff;
}
.more .flip{
transform: rotate(180deg);
}
.loading{
background-image: url('../images/loading.png');
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
}
.more .loading{
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
html:
<header>这是头部</header>
<div id="wrapper">
<div class="scroller">
<ul>
<li>这是一个li元素</li>
<li>这是一个li元素</li>
<li>这是一个li元素</li>
<li>这是一个li元素</li>
<li>这是一个li元素</li>
</ul>
<div class="more"><i class="pull_icon"></i><span>上拉加载...</span></div>
</div>
</div>
<footer>这是底部</footer>
js:
var myscroll = new iScroll("wrapper",{
onScrollMove:function(){
if (this.y<(this.maxScrollY)) {
$('.pull_icon').addClass('flip');
$('.pull_icon').removeClass('loading');
$('.more span').text('释放加载...');
}else{
$('.pull_icon').removeClass('flip loading');
$('.more span').text('上拉加载...')
}
},
onScrollEnd:function(){
if ($('.pull_icon').hasClass('flip')) {
$('.pull_icon').addClass('loading');
$('.more span').text('加载中...');
pullUpAction();
}
},
onRefresh:function(){
$('.more').removeClass('flip');
$('.more span').text('上拉加载...');
}
});
function pullUpAction(){
setTimeout(function(){
for (var i = 0; i < 5; i++) {
$('.scroller ul').append("<li>这是添加的li元素!</li>");
}
myscroll.refresh();
},1000)
}
if ($('.scroller').height()<$('#wrapper').height()) {
$('.more').hide();
myscroll.destroy();
}