下拉加载 实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果

[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