Iscroll上拉加載、下拉刷新功能代碼實現
<!DOCTYPE html>
<html>javascript
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="jquery-3.0.0.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
<title>IScroll</title>html
<style>
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: pink;
}
ul,
li {
list-style: none;
background: white;
}
header {
line-height: 50px;
text-align: center;
position: absolute;
width: 100%;
top: 0px;
left: 0;
height: 50px;
background: darkcyan;
}
ul li {
line-height: 40px;
font-family: "微軟雅黑";
text-align: center;
border-bottom: 2px solid gray;
}
#wrapper {
position: absolute;
top: 50px;
left: 0;
bottom: 50px;
right: 0;
overflow: hidden;
/*overflow-y: scroll;*/
}
footer {
width: 100%;
height: 50px;
background: #999;
text-align: center;
line-height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
</style>java
</head>jquery
<body>
<header>header</header>
<div id="wrapper">
<ul>
<li>1111111111111</li>
<li>2222222222</li>
<li>333333333</li>
<li>444444444</li>
<li>55555555</li>
<li>666666666666</li>
<li>777777777</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
<li>666666666666</li>
</ul>
</div>
<footer>
footer
</footer>ajax
</body>app
</html>ide
<script>
//1.使用isroll區域不要出現滾動條
//2.使用isroll只會給第一個子集元素加上滾動效果
window.onload = function() {
var myIscroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true
});scala
myIscroll.on('slideDown', function() {
alert("下拉");
updata();
})htm
myIscroll.on('slideUp', function() {
// alert("上拉");
ajax();
myIscroll.refresh();
})blog
function updata() {}
function ajax() {
var ul = document.querySelector("#wrapper ul");
for(var i = 0; i < 5; i++) {
var ele = document.createElement("li");
ele.innerHTML = "加載出來的li";
ul.appendChild(ele);
}
}
}</script>
- 1. H5 用 iScroll實現上拉加載 下拉刷新的功能
- 2. iscroll 下拉刷新功能
- 3. iscroll-probe 下拉刷新，下拉加載
- 4. iscroll實現移動端下拉刷新，上拉加載更多
- 5. IScroll實現下拉刷新，上拉加載更多
- 6. iScroll實現下拉刷新上拉加載
- 7. H5基於iScroll實現下拉刷新，上拉加載更多
- 8. 上拉加載、下拉刷新功能實現
- 9. ListView上拉加載下拉刷新功能實現
- 10. Flutter listview下拉刷新 上拉加載更多 功能實現
- 更多相關文章...
- • ionic 下拉刷新 - ionic 教程
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • IntelliJ IDEA代碼格式化設置
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。