移动端布局 + iscroll.js

  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: auto;更改*/
 71                 overflow: hidden;
 72             }
 73             .content .banner{
 74                  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>