我們經(jīng)常會 遇到這個(gè)一種 布局 , header 和 footer 是固定 的, 中間的 內(nèi)容是可滾動的 , 在 iOS 中 直接 可能 用 table 控件來實(shí)現(xiàn) , 但是 在H5中 我們 就很 尷尬了 , 要實(shí)現(xiàn) 一大堆的 樣式 布局 , 不要 著急 , 歷史上的定論, 越是 復(fù)雜的 情況 , 越是用 "大牛" 去 研究 , 這不 念介紹的 iScroll就是解決這種布局的 實(shí)踐
.
下面就一起來看看這個(gè)插件的簡單使用:
iScroll
一款實(shí)現(xiàn)上下 欄的 庫
要點(diǎn):
1.布局
<header></header>
<div id = "wrapper">
<div>
<span>下拉刷新</span>
<ul>
<li>數(shù)據(jù)</li>
<li>數(shù)據(jù)</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;
}
/*設(shè)置 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.相關(guān) js
<!-- 引入 兩個(gè)重要的 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設(shè)置 調(diào)用 iscroll
<!-- 相關(guān)js -->
<script type="text/javascript">
// 使用iscroll
//iscroll 只作用于 第一個(gè)子級元素
//使用iscroll的區(qū)域 不允許 滾動(就是超出 區(qū)域 不滾動)
var myIscroll = new IScroll("#wrapper",{
//允許 滾輪 , 默認(rèn)false
mouseWheel:true,
//允許 滾動條出現(xiàn) ,并 滾動 , 默認(rèn) false
scrollbars:true,
//滾動條 漸隱 漸現(xiàn) , 默認(rèn) false
fadeScrollbars:true
});
</script>
5.效果圖
1)正常效果
正常效果
2)下拉刷新
下拉刷新
3)上拉加載
上拉加載
