<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <title></title>

         <style>

             *{

                 padding: 0;

                 margin: 0;

             }

             li{ list-style: none; }

             a{ text-decoration: none; }

             html, body{

                 width: 100%;

                 height: 100%;

             }

             .header{

                 width: 100%;

                 height: 44px;

                 position: absolute;

                 top: 0;

                 left: 0;

                 background: red;

             }

             .header .title{

                 height: 44px;

                 text-align: center;

                 line-height: 44px;

                 font-size: 20px;

             }

             .header .button{

                 width: 60px;

                 height: 34px;

                 position: absolute;

                 top: 5px;

                 right: 5px;

                 border: 1px solid #fff;

                 border-radius: 5px;

                 text-align: center;

                 line-height: 34px;

                 color: #fff;

             }

             .tabs{

                 width: 100%;

                 height: 49px;

                 position: absolute;

                 left: 0;

                 bottom: 0;

                 display: flex;

                 background: yellow;

             }

             .tabs li{

                 flex: 1;

             }

             .tabs li a{

                 display: block;

                 text-align: center;

                 line-height: 49px;

             }

             .content{

                 position: absolute;

                 left: 0;

                 width: 100%;

                 top: 44px;

                 bottom: 49px;

                 /*overflow: auto;更改*/

                 overflow: hidden;

             }

             .content .banner{

                 width: 100%;

                 height: 200px;

                 background: yellowgreen;

             }

             .content .list li{

                 border-bottom: 1px solid #ddd;

                 line-height: 40px;

             }

         </style>

     </head>

     <body>

         <header class="header">

             <h1 class="title">首页</h1>

             <a class="button" onclick="btnAction()">按钮</a>

         </header>

         <!-- 主体 -->

         <!-- content滚动视图 -->

         <div class="content">

             <!-- wrapper滚动容器 -->

             <div class="wrapper">

                 <div class="banner"></div>

                 <ul class="list">

                     <li onclick="liAction()">列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                     <li>列表--大是的发送到是</li>

                 </ul>

             </div>

         </div>

         <!-- tab切换 49px(逻辑像素) 98px(物理像素) -->

         <nav class="tabs">

             <li><a href="#">首页</a></li>

             <li><a href="#">热门</a></li>

             <li><a href="#">发现</a></li>

             <li><a href="#">设置</a></li>

         </nav>

         <script src="iscroll.js"></script>

         <script>

             //让主体部分的内容滚动，需要满足的条件

             //滚动视图（让谁滚动，就是谁成为滚动视图）

             //滚动视图的容器 （滚动视图的第一个层级的子标签，并且所有需要滚动的内容都在这个标签之内）

             //滚动视图大小固定，overflow：hidden

             //以上条件满足就可以创建滚动视图

             //滚动起来：滚动视图的容器的大小 大于 滚动视图的大小

             //创建滚动视图

             //参数1：选择器，或dom对象

             //参数2：配置参数

             var scroll = new IScroll('.content', {

                 click: true, //iscroll为了性能最优

                 tap: true,

                 mouseWheel: true,

                 startY: -200,

                 scrollbars: true,

                 fadeScrollbars: true

             })

             function liAction(){

                 console.log('click');

                 //点击销毁scroll

                 scroll.destroy();

             }

             function btnAction(){

                 console.log(scroll);

             }

         </script>

     </body>

 </html>

移动端布局 + iscroll.js的更多相关文章

  1. 移动端布局 + iscroll + 滚动事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 重写移动端滚动条[iScroll.js核心代码]

    最近写组件库的时后,发现这个滚动条是真的丑啊,决定重新撸一个滚动条: 首先咱们回顾一下移动端浏览器滚动条特性: 滚动条在开始滚动时渐显,滚动结束后渐隐 滚动条不占内容区宽度,悬浮固定 滚动条高度(深灰 ...

  3. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

  4. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  5. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  6. 移动端下拉刷新,iScroll.js用法(转载)

    本文转载自: iScroll.js 用法参考 (share)

  7. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

  8. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  9. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

随机推荐

  1. IDEA webapp文件夹不识别解决方案

    使用IDEA 创建moudule 用的是的是maven archertype-quickstart ,自动生成并么有webapp目录,于是我从别的项目中拷贝了一个,发现webapp文件夹图标和普通文件 ...

  2. Install ncurses (ncurses-devel) and try again

    apt install libncurses5-dev libncursesw5-dev

  3. Codeforces 1105E 最大独立集 状态DP 中途相遇法

    题意:你有一个字符串, 有两种操作,一种是改变字符串,一种是某个用户询问这个字符串,如果一个用户每次查询字符串的时候都是他的用户名,他就会高兴.问最多有多少个用户会高兴? 题意:容易发现,在两个1操作 ...

  4. 【CSS】选择器优先级

    CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...

  5. Java对象什么时候可以被垃圾回收？JVM的永久代中会发生垃圾回收么？

    当对象对当前使用这个对象的应用程序变得不可触及的时候,这个对象就可以被回收了.垃圾回收不会发生在永久代,如果永久代满了或者是超过了临界值,会触发完全垃圾回收(Full GC).如果你仔细查看垃圾收集器 ...

  6. SpringBoot 2.x 使用 JWT（JSON Web Token）

    一.跨域认证遇到的问题 由于多终端的出现,很多的站点通过 web api restful 的形式对外提供服务,采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于 cookie 的 S ...

  7. 重新开始学习C++

    从2002年,大二的那个夏天开始,就接触了C++这门语言,大学那会就是在老师不停教育下,背诵C++的各种特征,完全不知道C++干嘛用的,当然自然也是不知道汇编语言,C语言是干嘛用的,老师让学就学吧.那 ...

  8. 思维——cf1178E

    一开始少看了条件:相邻两个字符不相等,字符集只有abc 那么我们取开头结尾各两个字符,一定有两个是相等的 #include<bits/stdc++.h> using namespace s ...

  9. hibernate5.2.10.Final基本配置

    1.在官网去下载,解压后在lib/required目录下的所有jar包都是必要的. 2.为了之后配置方便,建议在eclipse里面安装一个东东,操作步骤是在eclipse->Help->I ...

  10. 2019牛客多校第三场F-Planting Trees(单调队列)

    Planting Trees 题目传送门 解题思路 枚举每一个下边界,再枚举其对应的所有上边界,求出其对应区间内的最大最小值,当下边界一样的时候,其最大最小值可以随着上边界减小逐步更新.然后将这些最大 ...