iscroll的应用

一、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();
		}