<!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. Chrome不支持css字体小于12px的解决办法

    我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...

  2. 笔记60 Spring+Mybatis整合

    整合思路:将SessionFactory交给Spring管理,并且把Mapper和XML结合起来使用. 一.目录结构 二.基本的pojo Category.java package com.pojo; ...

  3. appium1.4+华为8.0执行自动化脚本，报启动session失败，原因是unicode_ime_apk\Uni codeIME-debug.apk在手机上已存在，再次安装失败，导致启动session失败，解决办法：换高版本的appium

    最开始做Android自动化测试时,通过执行脚本发现报,已安装UnicodeIME-debug.apk,再次安装失败,当时觉得这个apk对我来说没用,就把D:\Program Files (x86)\ ...

  4. Vue学习笔记【15】——Vue实例的生命周期

    生命周期与生命周期钩子 什么是生命周期:从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已: 生命周期钩子 = 生命周期 ...

  5. Qt第三方库QCustomPlot——QCustomPlot解读

    这个小部件类,对于QCustomPlot的所有方面都有所体现 下面阅读它的函数: 函数组织顺序为: 基本设置---添加图线---删除图线---添加额外Item---层次管理---坐标轴管理----导出 ...

  6. JCF——工具类

  7. 数学思维——cf1244C

    可惜cf不能用int128,不然这个题就是个exgcd的板子题 这是exgcd的解法,但是只用ll的话会溢出 #include<bits/stdc++.h> using namespace ...

  8. 在delphi中执行javascript代码

    有时做项目难免用到代码交叉调用,delphi中执行js就是一种,两种方法可用: 一.使用webbrower,比较麻烦 二.使用ScriptControl,简单方便: 1.首先 uses ComObj; ...

  9. NodeJS+Express+mySQL服务端开发详解

    随着NodeJS的发展,现在已经被很多人熟知,NodeJS已经成为了前端开发人员必备的技能.本文不会对NodeJS过多介绍 如果你感兴趣可以访问NodeJS 官网, 维基百科 本文是利用NodeJS+ ...

  10. Selenium2Library中select frame关键字对没有name和id的frame或者iframe的处理

    elenium2Library中原有的select_frame函数(对应的关键字为select frame)可根据locator选择frame,但是,若某个frame或者iframe没有id,没有na ...