我们经常会 遇到这个一种 布局 , 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",{
//允许 滚轮 , 默认false
mouseWheel:true,
//允许 滚动条出现 ,并 滚动 , 默认 false
scrollbars:true,
//滚动条 渐隐 渐现 , 默认 false
fadeScrollbars:true
});
</script>
5.效果图
1)正常效果
正常效果
2)下拉刷新
下拉刷新
3)上拉加载
上拉加载
