移動端佈局 + iscroll + 滾動事件

時間 2019-11-17
標籤移動佈局 iscroll 滾動事件欄目無線简体版
原文原文鏈接
  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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。