<!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. RPC协议的介绍

    根据网上搜索的一些资料摘抄汇总的,如果有误,欢迎斧正. 早期单机时代,一台电脑上运行多个进程,大家各干各的,老死不相往来.假如A进程需要一个画图的功能,B进程也需要一个画图的功能,程序员就必须为两个进 ...

  2. Transformer 学习

    https://www.bilibili.com/video/av65521101/?p=98 (李宏毅,视频讲解,可以作为基础入门) 课件:https://pan.baidu.com/s/1Shjn ...

  3. KiCAD差分布线

    KiCAD差分布线方法 KiCAD在进行差分布线的时候,会自动按照网路名称生成差分对,所以差分对的名称必须是以_P_N或+/-结束,这样才能找到一对差分对,比如说CAN网络,可以定义为CAN_P/CA ...

  4. C# 关于获取周，月，年时间大全

    DateTime now = DateTime.Now; DayOfWeek dayOfWeek = now.DayOfWeek; : (int)dayOfWeek; //本周第一天(此结果是周一,如 ...

  5. python 装饰器的坑

    今天研究了下装饰器,添加重试功能遇到了个坑,跟大家分享一下: 代码如下: def re_try(maxtry): print locals() def wrapper(fn): print local ...

  6. Linux part2（系统的相关设置变更）

    修改Linux的系统语言 首先查看当前系统的语言 1.echo $LANG 查看当前操作系统的语言 中文:zh_CN.UTF-8 英文: en_US.UTF-8 2.临时更改默认语言,当前立即生效 重 ...

  7. 当我们在Java中新建一个对象的时候发生了什么？

  8. vue-cli 3.0版本，配置代理Proxy，不同环境不同target（生产环境，uat环境和本地环境的配置）

    1.在项目的的根目录下新建vue.config.js 2.新建一个config包,里面存放不同的环境文件,里面包含:pro.env.js(生产环境配置),uat.env.js(测试环境配置),dev. ...

  9. Linux常用命令入门

    在Linux早期的版本中,由于不支持图形化操作,用户基本上都是使用命令行方式来对系统进行操作.掌握常用 的一些Linux命令是非常有必要的,下面将分类进行介绍.由于篇幅有限,在这里我们介绍命令时有些不 ...

  10. ac自动机暴力跳fail匹配——hdu5880

    很简单的题,ac自动机里再维护一个len表示每个状态的串长,用s去query时每到一个结点都要暴力跳fail,因为有可能这个结点不是,但是其fail是危险结点,找到一个就直接break 再用个差分数组 ...