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 100%; 16 height: 100%; 17 } 18 19 .header{ 20 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 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 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 100%; 68 top: 44px; 69 bottom: 49px; 70 overflow: hidden; 71 } 72 .content .banner{ 73 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>