iscroll的基本使用

最新推荐文章于 2020-02-15 18:42:37 发布

wenqingzzz

最新推荐文章于 2020-02-15 18:42:37 发布

阅读量620

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/wenqingzzz/article/details/45768805

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.首先是页面css要设置好，然后才进行js的引入就好了。

通过一个简单的例子进行说明就好了。因为写的是手机端的全屏显示，所以需要注意一下meta标签的数据

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/iscroll01.css">
<title>iscroll01</title>
</head>
<body>
	<div id="wrapper">
		<ul>
			<li>这里是第一个画面</li>
			<li>这里是第二个画面</li>
		</ul>
	</div>
	<script type="text/javascript" src="js/iscroll.js"></script>
	<script type="text/javascript">
		var myscroll;
        function loaded(){
            myscroll=new iScroll("wrapper",{hScrollbar:true, vScrollbar:true,momentum:true});
        }
       window.addEventListener("DOMContentLoaded",loaded,false);
	</script>
</body>
</html>

下面是css的样式，随便写的

@CHARSET "UTF-8";
*{
	margin:0;
	padding:0;
}
body,html{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#wrapper{
	position:relative;
	width:100%;
	height:100%;
}
#wrapper ul{
	width:200%;
	height:100%;
	position:relative;
}
#wrapper li{
	display:block;
	height:100%;
	width:50%;
	text-align:center;
	float:left;
}