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: hidden;
71 }
72 .content .banner{
73 width: 100%;
74 height: 200px;
75 background: yellowgreen;
76 }
77 .content .list li{
78 border-bottom: 1px solid #ddd;
79 line-height: 40px;
80 }
81 </style>
82 </head>
83 <body>
84 <header class="header">
85 <h1 class="title">首页</h1>
86 <a class="button">按钮</a>
87 </header>
88
89 <!-- 主体 -->
90 <!-- content滚动视图 -->
91 <div class="content">
92 <!-- wrapper滚动容器 -->
93 <div class="wrapper">
94 <div class="banner"></div>
95 <ul class="list">
96 <li>列表--大是的发送到是</li>
97 <li>列表--大是的发送到是</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 </ul>
115 </div>
116 </div>
117
118 <!-- tab切换 49px(逻辑像素) 98px(物理像素) -->
119 <nav class="tabs">
120 <li><a href="#">首页</a></li>
121 <li><a href="#">热门</a></li>
122 <li><a href="#">发现</a></li>
123 <li><a href="#">设置</a></li>
124 </nav>
125
126
127
128
129 <script src="iscroll-probe.js"></script>
130 <script>
131 //让主体部分的内容滚动，需要满足的条件
132 //滚动视图（让谁滚动，就是谁成为滚动视图）
133 //滚动视图的容器 （滚动视图的第一个层级的子标签，并且所有需要滚动的内容都在这个标签之内）
134 //滚动视图大小固定，overflow：hidden
135
136 //以上条件满足就可以创建滚动视图
137
138 //滚动起来：滚动视图的容器的大小 大于 滚动视图的大小
139
140
141 //创建滚动视图
142 //参数1：选择器，或dom对象
143 //参数2：配置参数
144 var scroll = new IScroll('.content', {
145 click: true, //iscroll为了性能最优
146 tap: true,
147 mouseWheel: true,
148 startY: -200,
149 scrollbars: true,
150 fadeScrollbars: true,
151 probeType: 3
152 })
153 // probeType：1 滚动不繁忙的时候触发
154 // probeType：2 滚动时每隔一定时间触发
155 // probeType：3 每滚动一像素触发一次
156
157 //添加滚动事件的监听
158 //开始滚动前的事件
159 scroll.on('beforeScrollStart', function(){
160 console.log('beforeScrollStart');
161 })
162 //开始滚动
163 scroll.on('scrollStart', function(){
164 console.log('scrollStart');
165 })
166
167 //正在滚动scroll，为了性能最优，将这个监听关闭了。
168 //打开这个监听，需要使用iscroll-probe.js,并且配置中设置probeType: 1/2/3
169 scroll.on('scroll', function(){
170 console.log('scroll');
171 console.log(scroll.y)
172 })
173
174 //滚动停止
175 scroll.on('scrollEnd', function(){
176 console.log('scrollEnd');
177 })
178
179 //滚动取消
180 scroll.on('scrollcancel', function(){
181 console.log('scrollcancel');
182 })
183
184
185
186 </script>
187
188
189
190 </body>
191 </html>
