页面区域滚动IScroll插件

iScroll 滚动 插件的简单使用

我们经常会 遇到这个一种 布局 , header 和 footer 是固定 的, 中间的 内容是可滚动的 , 在 iOS 中 直接 可能 用 table 控件来实现 , 但是 在H5中 我们 就很 尴尬了 , 要实现 一大堆的 样式 布局 , 不要 着急 , 历史上的定论, 越是 复杂的 情况 , 越是用 “大牛” 去 研究 , 这不 念介绍的 iScroll就是解决这种布局的 实践

下面就一起来看看这个插件的简单使用:

iScroll
一款实现上下 栏的 库
要点:

1.布局

<header></header>
<div id = "wrapper">
    <div>
        <span>下拉刷新</span>
        <ul>
            <li>数据</li>
            <li>数据</li>
        </ul>
        <span>上拉加载</span>
    </div>
</div>
<footer></footer>

2.样式

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: green;
    }

    #wrapper{
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
        overflow: hidden;
    }
    ul{
        list-style: none;
        background: white;
    }
    ul li{
        line-height: 50px;
        text-indent: 40px;
        font-size: 40px;
    }

    header{
        width: 100%;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        background: blue;
    }
    footer{
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: yellow;
    }
    /*设置  span*/
    span{
        width: 100%;
        height: 50px;
        /*仅仅是 字体的 地方*/
        background: transparent;
        font-size: 100px;
        text-align: center;
        color: red;
    }
    span:first-child{
        position: absolute;
        top: -100px;
    }
    span:last-child{
        position: absolute;
        bottom: -100px;
    }
</style>

3.相关 js

<!-- 引入 两个重要的 js文件 -->
<script type="text/javascript" src ="iscroll/build/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src ="iscroll/build/iscroll.js" ></script>           

4.js设置 调用 iscroll

<!-- 相关js -->
<script type="text/javascript">
    // 使用iscroll
    //iscroll 只作用于 第一个子级元素
    //使用iscroll的区域 不允许 滚动(就是超出 区域  不滚动)
    var myIscroll = new IScroll("#wrapper",{
       scrollY: true, //允许滚动方向
        //允许 滚轮 , 默认false
        mouseWheel:true,
        //允许  滚动条出现 ,并 滚动 , 默认 false
        scrollbars:true,
        //滚动条 渐隐 渐现 , 默认 false
        fadeScrollbars:true
    });
</script>

5.效果图

1)正常效果

2)下拉刷新

3)上拉加载