iscroll4如何使用，iscroll使用实例

最新推荐文章于 2019-07-16 22:01:44 发布
一年e度的夏天
最新推荐文章于 2019-07-16 22:01:44 发布
阅读量2.3k
点赞数 1
分类专栏：前端开发文章标签： iscroll4使用实例 iscroll4怎么使用
本文链接：https://blog.csdn.net/u011410529/article/details/41443017
版权
前端开发专栏收录该内容
9 篇文章 0 订阅
订阅专栏
<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>所有资讯</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css"/>
  <link rel="stylesheet" href="__PUBLIC__/css/isscroll.css"/>
  <script src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
  <script src="__PUBLIC__/assets/js/iscroll.js"></script>
  <script type="text/javascript">

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullDownAction () {
	setTimeout(function () {	// <-- 在这里显示ajax的数据
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = '新增上面' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
	setTimeout(function () {	// <-- 在这里显示ajax返回的数据
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = '新增下行 ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

/*
 * 
 function pullDownAction () {// 这个函数是下拉刷新，但是刷新后样式有问题，高度不变，滚动条拉到底部了，内容却没有达到底部。
	    setTimeout(function () {//如果去掉$.ajax后换成其他的循环函数，正常。
	    var el, li, i;
	    el = document.getElementById('thelist');
	    $.ajax({ <a href="np.php?callback=?&num='+(++n)+'',/" rel="nofollow">url:'http://202.198.133.181/android/andrew2/jsonp.php?callback=?&num='+(++n)+'',//</a>从该处获取数据
	         dataType:'json',
	        success:function(data){
	            for (i=0;i<5;i++)
	             {
	        var time = getLocalTime(data[i]['pub_time']);
	        li = document.createElement('li');
	                  li.innerHTML = "<a href='news.html?news_id="+data[i]['news_id']+"'>"+data[i]['title']+"</a>"+time;
	        el.insertBefore(li, el.childNodes[0]);                      }
	    }//;success不能跟分号
	});myScroll.refresh();}, 1000);
	}
	
	
	//获取数据
	function xunlei(){
    var el, li, i,option,ell;
    el = document.getElementById('thelist');
    $.ajax({   url:jsonp2.php?callback=?',//从该处获取数据
    dataType:'json',
    success:function(data){
    for (i=0;i<20;i++)
    {
    li = document.createElement('li');
    var time = getLocalTime(data[i]['pub_time']); <span></span> li.innerHTML = "<a href='news.html?news_id="+data[i]['news_id']+"'>"+data[i]['title']+"</a>"+time;
    el.appendChild(li, el.childNodes[0]);
    }
 */

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 = '向下拉刷新...';
			} 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();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
</head>
<body>

<header data-am-widget="header" class="am-header am-header-default">
  <h1 class="am-header-title">
    <a href="#title-link">所有资讯</a>
  </h1>
</header>
<div id="wrapper" style="overflow: hidden; left: 0px;">
	<div id="scroller">
		<div id="pullDown">
			<span class="pullDownIcon"></span><span class="pullDownLabel">下拉加载更多...</span>
		</div>
		<ul id="thelist">
			 	
			 	<li>
			 		<img alt="" src="__PUBLIC__/images/p1-2.png" style="width: 80px;height: 30px" />
			 		<span>这里是标题</span><span>这里是内容哦</span>
			 	</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	<li>你好1</li>
			 	
		</ul>
		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">上拉刷新...</span>
		</div>
	</div>
<div><div></div></div></div>
<div class="mydiv1">
</div>

<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
     id="">
  <ul class="am-navbar-nav am-cf sm-block-grid-4">
    <li>
      <a href="tel:123456789">
        <span class="am-icon-phone"></span>
        <span class="am-navbar-label">呼叫</span>
      </a>
    </li>
    <li data-am-navbar-share>
      <a href="###">
        <span class="am-icon-share-square-o"></span>
        <span class="am-navbar-label">分享</span>
      </a>
    </li>
    <li data-am-navbar-qrcode>
      <a href="###">
        <span class="am-icon-qrcode"></span>
        <span class="am-navbar-label">二维码</span>
      </a>
    </li>
    <li>
      <a href="https://github.com/allmobilize/amazeui">
        <span class="am-icon-github"></span>
        <span class="am-navbar-label">GitHub</span>
      </a>
    </li>
    <li>
      <a href="http://amazeui.org/getting-started">
        <span class="am-icon-download"></span>
        <span class="am-navbar-label">下载使用</span>
      </a>
    </li>
    <li>
      <a href="https://github.com/allmobilize/amazeui/issues">
        <span class="am-icon-location-arrow"></span>
        <span class="am-navbar-label">Bug 反馈</span>
      </a>
    </li>
  </ul>
</div>

<script>
var browser_width = $(window).height();
$("div.mydiv1").css("height",browser_width);
$(window).resize(function() {
browser_width = $(window).height();
$("div.mydiv1").css("height",browser_width);
});
</script> 
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>


</body>
</html>




#wrapper {
	position:absolute; z-index:1;
	top:45px; bottom:48px; left:-9999px;
	width:100%;
	background:#aaa;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;

}

#scroller ul {
	list-style:none;
	padding:0;
	width:100%;
	text-align:left;
	margin: 0;
}

#scroller li {
	padding:0 10px;
	height:80px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

#myFrame {
	position:absolute;
	top:0; left:0;
}



/**
 *
 * Pull down styles
 *
 */
#pullDown, #pullUp {
	background:#fff;
	height:40px;
	line-height:40px;
	padding:5px 10px;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	font-size:14px;
	color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
	display:block; float:left;
	width:40px; height:40px;
	background:url(../images/pull-icon@2x.png) 0 0 no-repeat;
	-webkit-background-size:40px 80px; background-size:40px 80px;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:250ms;	
}
#pullDown .pullDownIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon  {
	-webkit-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
	-webkit-transform:rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
	-webkit-transform:rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
	background-position:0 100%;
	-webkit-transform:rotate(0deg) translateZ(0);
	-webkit-transition-duration:0ms;

	-webkit-animation-name:loading;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg) translateZ(0); }
	to { -webkit-transform:rotate(360deg) translateZ(0); }
}
iscroll的使用实例，自己存着！！！！！！！！！