<!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. LeetCode Array Easy 53. Maximum Subarray 个人解法 和分治思想的学习

    Description Given an integer array nums, find the contiguous subarray (containing at least one numbe ...

  2. Java中super关键字的位置

    1.子类的构造函数如果要引用super的话,必须把super放在函数的首行. 例如: class Base  { Base()  {  System.out.println("Base&qu ...

  3. shell变量的间接引用

  4. JavaScript性能优化之摇树

    作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到 ...

  5. 转帖 eclipse Web项目WebContent目录修改

    最近在做Web 项目时,新建了一个WEB 项目,如webdemo,eclipse默认的build路径为build,WEB-INF存放于WebContent下面,今改了一个build路径和WebCont ...

  6. php 学习一 变量的定义

    //php有如下几种数据类型 // false true boolean类型 //integer int 整数 //float 浮点数就是小数 //string 字符串 //string null 空 ...

  7. robotframework+python3+selenium自动化测试环境搭建---第一集

    1.安装python3.6 1.1 可选择Customize installation自定义安装内容,记得要勾选Add to PATH(这样就不用自己配置环境变量了). 1.2 安装成功后,可以输入p ...

  8. Spring 容器初始化方法

    Resource resource = new ClassPathResource("/bean.xml");         resource = new FileSystemR ...

  9. js中的函数声明和函数表达式的区别

    目录 一.声明与表达式的格式 1.1 声明式的格式: 1.2 表达式的格式: 二.区别 2.1 函数表达式可以直接在后面加括号执行,而函数声明不可以. 2.2 函数表达式可以被提前解析出来 2.3 命 ...

  10. 树莓派安装omv

    1.Win32DiskImager写入光盘镜像 2.进入omv页面 设置 ip 端口号 ,设置时间,设置ssh打开,设置会话超时时间 ××××设置 dns  很重要!! #这里用的是阿里云的DNS服务 ...