<!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. 2018-2-13-安装-aria2

    title author date CreateTime categories 安装 aria2 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23:3 + ...

  2. 通信有连接有消息队列选择boost.asio

    通信有连接有消息队列选择boost.asio 连接自主管理 消息队列自主管理

  3. cd 切换

    切换

  4. position: absolute 如果不设置left, right, top, bottom会在什么位置

    一般我们设置position: absolute都会一起设置left/right/top/bottom, 但是如果不设置, 布局会是什么样子的呢? 直接上图 1.一个大盒子中4个小盒子, 正常文档流布 ...

  5. vue Inline JavaScript is not enabled. Is it set in your options?

    Vue 全家桶 vue全面介绍--全家桶.项目实例 https://www.cnblogs.com/nogodie/p/9853660.html vue项目 Inline JavaScript is ...

  6. nc临时开启端口并监听

    port="6379 3306 27017 4505 4506 24007 24008 49152" #while true #do for i in $port do isexi ...

  7. 【网络】Ping 的TTL理解

    一.含义 “TTL”是生存时间(Time To Live)的意思 关于时间与跳的讨论, https://www.zhihu.com/question/61007907 一开始理解为time to le ...

  8. 【多线程】volatile

    Java并发编程:volatile关键字解析 volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在 ...

  9. 管理员技术(六)： 硬盘分区及格式化、 新建一个逻辑卷、调整现有磁盘的分区、扩展逻辑卷的大小、添加一个swap分区

    一.硬盘分区及格式化 问题: 本例要求熟悉硬盘分区结构,使用fdisk分区工具在磁盘 /dev/vdb 上按以下要求建立分区: 1> 采用默认的 msdos 分区模式        2> ...

  10. elementUI拿到当前表格行的数据的另一种写法

    背景: 这里是通过点击“修改”按钮后才拿到当前行的数据,不是点击当前行任意位置拿到数据,所以不能用 @row-click 方法 改用点击的时候直接拿到这个表里面的这一条数据 1.绑定事件 <te ...