[Java教程]iscroll5實現一個下拉刷新上拉加載的效果

0 2016-08-24 15:00:08 直接上代碼！！！

* {

margin: 0;

padding: 0;

} ul, li {

list-style: none;

} #wrapper {

width: 100%;

} .up, .down, li {

height: 49px;

line-height: 49px;

text-align: center;

} .up {

display: none;

background-color: darkgrey;

color:#ffffff;

border-bottom: 1px solid lightgrey;

} .down {

display: none;

background-color: darkgrey;

color: #ffffff;

} li {

background-color: darkgrey;

border-bottom: 1px solid lightgrey;

} #wrapper {

position: relative;

height: 500px;

background: #aaa;

overflow: hidden; /*iscroll不能設置overflow為auto*/

} #scroller {

position: absolute;

left: 0;

top: 0;

width: 100%;

} .iScrollVerticalScrollbar {

/*設置凹槽的樣式*/

position: absolute;

z-index: 10;

width: 5px;

top: 0;

right: 0;

overflow: hidden;

height: 100%;

border-radius: 10px;

} .iScrollIndicator {

/*設置滾動條的樣式*/

width: 100%;

background: orange;

border-radius: 10px;

height: 30%;

}

下拉刷新

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

上拉加載更多

var myScroll = new IScroll("#wrapper", {

useTransition: true,

useTransform: true,

mouseWheel: true,

scrollbars: "custom",//只有該屬性的值為"custom"，才能通過.iScrollVerticalScrollbar和.iScrollIndicator設置凹槽和滾動條的樣式

interactiveScrollbars: true,

resizeScrollbars: false,//當這個屬性設置為否時,才可以通過.iScrollIndicator改變滾動條(不是凹槽的的寬和高)

probeType: 3//這個值設置為3而且必須引入iscroll-probe.js才能觸發onscroll事件

}); var down = document.getElementById("down");

var up = document.getElementById("up");

var scroller = document.getElementById("scroller");

var list = document.getElementById("list");

var step = 3;//上拉加載時的動態創建的li的個數

var max = 30;//li的最大個數

var flag = false;//滾動條滾動到最底部的標識

var end = false;//數據加載完成后的標識 myScroll.on("scroll", function () {

if (parseInt(this.y) >= 0 && this.directionY == -1) {//down

up.style.display = "block";

if (parseInt(this.y) == 0) {

up.style.display = "none";

this.refresh();

}

}

if (parseInt(this.y) == this.maxScrollY) {

if (end) {

return;

}

var self = this;

setTimeout(function () {

down.style.display = "block";

self.y -= (list.children[0].clientHeight) * step;

self.refresh();

flag = true;

if (list.children.length == max) {

down.innerHTML = "沒有更多數據";

flag = false;

setTimeout(function () {

down.style.display = "none";

self.refresh();//為了解決 down.style.display = "none";之后最下面有一行空白；

end = true;

}, 2000)

}

}, 1000); }

if (flag && this.directionY == 1 && this.y < this.maxScrollY) {

if (end) {

return;

}

flag = false;

down.style.display = "none";

var fragment = document.createDocumentFragment();

var len = list.children.length;//每次上拉時動態獲取當前li的總個數

var num = max - len;//最大個數和總個數的差值

step = num <= step && num >= 0 ? num : step;//當兩個數的差值大于等于0小于等于step的時候，step等于兩者之差，否則step不變

for (var i = 0; i < step; i++) {

var li = document.createElement("li");

li.innerHTML = list.children.length + i + 1;

fragment.appendChild(li);

}

list.appendChild(fragment);

}

});

}

window.addEventListener("load", load, false);

本文網址：http://www.shaoqun.com/a/248635.html

*特別聲明：以上內容來自于網絡收集，著作權屬原作者所有，如有侵權，請聯系我們：admin@shaoqun.com。

0

總結

以上是生活随笔為你收集整理的下拉加载 实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。