iscroll的基本使用

来源:互联网 发布:单片机调试 编辑:程序博客网 时间:2024/05/18 12:31

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;}


0 0
原创粉丝点击