1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <title></title>
7 <style>
8 *{
9 padding: 0;
10 margin: 0;
11 }
12 li{ list-style: none; }
13 a{ text-decoration: none; }
14 html, body{
15 width: 100%;
16 height: 100%;
17 }
18
19 .header{
20 width: 100%;
21 height: 44px;
22 position: absolute;
23 top: 0;
24 left: 0;
25 background: red;
26 }
27 .header .title{
28 height: 44px;
29 text-align: center;
30 line-height: 44px;
31 font-size: 20px;
32 }
33 .header .button{
34 width: 60px;
35 height: 34px;
36 position: absolute;
37 top: 5px;
38 right: 5px;
39 border: 1px solid #fff;
40 border-radius: 5px;
41 text-align: center;
42 line-height: 34px;
43 color: #fff;
44 }
45
46 .tabs{
47 width: 100%;
48 height: 49px;
49 position: absolute;
50 left: 0;
51 bottom: 0;
52 display: flex;
53 background: yellow;
54 }
55 .tabs li{
56 flex: 1;
57 }
58 .tabs li a{
59 display: block;
60 text-align: center;
61 line-height: 49px;
62 }
63
64 .content{
65 position: absolute;
66 left: 0;
67 width: 100%;
68 top: 44px;
69 bottom: 49px;
70 /*overflow: auto;更改*/
71 overflow: hidden;
72 }
73 .content .banner{
74 width: 100%;
75 height: 200px;
76 background: yellowgreen;
77 }
78 .content .list li{
79 border-bottom: 1px solid #ddd;
80 line-height: 40px;
81 }
82 </style>
83 </head>
84 <body>
85 <header class="header">
86 <h1 class="title">首页</h1>
87 <a class="button" onclick="btnAction()">按钮</a>
88 </header>
89
90 <!-- 主体 -->
91 <!-- content滚动视图 -->
92 <div class="content">
93 <!-- wrapper滚动容器 -->
94 <div class="wrapper">
95 <div class="banner"></div>
96 <ul class="list">
97 <li onclick="liAction()">列表--大是的发送到是</li>
98 <li>列表--大是的发送到是</li>
99 <li>列表--大是的发送到是</li>
100 <li>列表--大是的发送到是</li>
101 <li>列表--大是的发送到是</li>
102 <li>列表--大是的发送到是</li>
103 <li>列表--大是的发送到是</li>
104 <li>列表--大是的发送到是</li>
105 <li>列表--大是的发送到是</li>
106 <li>列表--大是的发送到是</li>
107 <li>列表--大是的发送到是</li>
108 <li>列表--大是的发送到是</li>
109 <li>列表--大是的发送到是</li>
110 <li>列表--大是的发送到是</li>
111 <li>列表--大是的发送到是</li>
112 <li>列表--大是的发送到是</li>
113 <li>列表--大是的发送到是</li>
114 <li>列表--大是的发送到是</li>
115 </ul>
116 </div>
117 </div>
118
119 <!-- tab切换 49px(逻辑像素) 98px(物理像素) -->
120 <nav class="tabs">
121 <li><a href="#">首页</a></li>
122 <li><a href="#">热门</a></li>
123 <li><a href="#">发现</a></li>
124 <li><a href="#">设置</a></li>
125 </nav>
126
127 <script src="iscroll.js"></script>
128 <script>
129 //让主体部分的内容滚动，需要满足的条件
130 //滚动视图（让谁滚动，就是谁成为滚动视图）
131 //滚动视图的容器 （滚动视图的第一个层级的子标签，并且所有需要滚动的内容都在这个标签之内）
132 //滚动视图大小固定，overflow：hidden
133
134 //以上条件满足就可以创建滚动视图
135
136 //滚动起来：滚动视图的容器的大小 大于 滚动视图的大小
137
138
139 //创建滚动视图
140 //参数1：选择器，或dom对象
141 //参数2：配置参数
142 var scroll = new IScroll('.content', {
143 click: true, //iscroll为了性能最优
144 tap: true,
145 mouseWheel: true,
146 startY: -200,
147 scrollbars: true,
148 fadeScrollbars: true
149 })
150
151 function liAction(){
152 console.log('click');
153 //点击销毁scroll
154 scroll.destroy();
155 }
156
157 function btnAction(){
158 console.log(scroll);
159 }
160
161 </script>
162
163
164
165 </body>
166 </html>
