如下图所示,我需要做一个上拉加载,下拉刷新的功能:
首先在 html 中引用这个插件:
<script src="/js/common/iscroll.js"></script>
然后插入我们的数据:
<div class="wrapper transition" id="wrapper">
<div class="scroller">
<div class="ani_box">
<div class="refresh_box"><span><i class="iconfont2 transition floatL"></i>刷新数据</span></div>
<ul id="list" class="alist">(这里是数据列表,是很多<li></li>,我在下面的 alist_temp 模板里填充)</ul>
<div class="load_box hide"><span><i class="iconfont2 transition floatL"></i>加载更多</span></div>
</div>
</div>
</div>
<script type="text/template" id="alist_temp">
<% for(var i = 0; i < list.length; i++){ %>
<li>
....
</li>
<% } %>
</script>
注意:
1、上面定义了 id="wrapper",这是必须的。
2、iscroll 只滚动 wrapper 里的第一个子元素,所以我们用一个<div class="scroller"></div>把他们包起来。
我在本例中加入了上拉和下拉的动效,分别用 refresh_box 和 load_box 来表现。
其 css 代码如下:
.wrapper{ position:absolute; z-index:1; top:60px; bottom:0; left:0; width:100%; overflow:hidden;}
.wrapper .scroller{ position:absolute; z-index:1; width:100%; -webkit-transform:translateZ(0); transform: translateZ(0);}
@-webkit-keyframes refresh-icon {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
.ani_box{}
.ani_box .refresh_box{ width:100%; height:30px; line-height:30px; text-align:center; overflow:hidden; margin-top:-30px; color:#999;}
.ani_box .refresh_box span{ display:inline-block;}
.ani_box .refresh_box i{ width:30px; height:30px; vertical-align:top; text-align:center; line-height:30px; -webkit-transform:rotate(0deg); transform:rotate(0deg);}
.ani_box .refresh_box.on i{ -webkit-animation:refresh-icon 800ms linear infinite;animation:refresh-icon 800ms linear infinite;}
.ani_box .load_box{ width:100%; height:30px; line-height:30px; text-align:center; overflow:hidden; margin-bottom:-30px; color:#999;}
.ani_box .load_box span{ display:inline-block;}
.ani_box .load_box i{ width:30px; height:30px; vertical-align:top; text-align:center; line-height:30px; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.ani_box .load_box.on i{ -webkit-transform:rotate(0deg); transform:rotate(0deg);}
然后 js 的写法:
(function () {
var myscroll = null,
$wrapper = $("#wrapper");
var $list = $("#list"),
list_temp = $("#alist_temp").html(), //填充数据的模板
page = 1;
// 初始化 iscroll
var initScroll = function () {
var nscroll = new iScroll("wrapper", {
hScrollbar: false,
vScrollbar: true,
fadeScrollbar: true,
onScrollMove: function () { //拉动页面
// 刷新和加载更多
if (this.y > 45) {
$(".refresh_box").addClass("on");
}else{
$(".refresh_box").removeClass("on");
}
if (this.y <= (this.maxScrollY - 45)) {
$(".load_box").addClass("on");
}else{
$(".load_box").removeClass("on");
}
},
onScrollEnd: function () { //拉动页面停止
myscroll && myscroll.refresh();
if ($(".refresh_box").hasClass("on")) {
getList(0); //下拉刷新
}
if ($(".load_box").hasClass("on") && !$(".load_box").hasClass("hide")) {
getList(1); //上拉加载
}
$(".refresh_box").removeClass("on");
$(".load_box").removeClass("on");
}
});
return nscroll;
}
var getList = function(npage, callback){
if(npage == 0){
page = 1;
}else{
page++;
}
$.ajaxEx({
type: 'get',
url: '/activity/list-data',
data:{
p: page
},
success: function (data) {
if(data.error_code === 0){
if(data.data.count == 0){
$list.html("<li class='null'><img src='/image/icon_tips_6.png' class='img_tips'><span>暂无活动</span>我们的征程是星辰大海<br>快来加入!</li>");
$(".load_box").addClass("hide");
}else{
var ndata = {
list: data.data.list
}
if(npage == 0){
$list.html(template(list_temp, ndata)); //这里是模板套数据
}else{
$list.append(template(list_temp, ndata)); //这里是模板套数据
}
myscroll && myscroll.refresh();
if($("#list li").length >= parseInt(data.data.count)){
$(".load_box").addClass("hide");
}else{
$(".load_box").removeClass("hide");
}
}
}else{
$.message.show(data.errmsg);
}
}
})
}
var init = function () {
myscroll = initScroll();
getList(0);
}
init();
})()
到此为止,这个功能就完成了。