最新在做一个微信商城有用到商铺列表展示，需要使用滑动上拉加载数据，就使用了iscroll，中间遇到很多坑，这里使用iscroll做一个简单的例子，希望能帮助到一些同学。
1.首先进入amazui官网下载amaui的zar包，解压到项目中
2.新建case.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>豆瓣同城 - 音乐 - 北京 | Just a iScroll Demo</title>
<link rel="stylesheet" href="../style/css/amazeui.min.css" />
<style>
html,
body,
.page {
height: 100%;
}
#wrapper {
position: absolute;
top: 49px;
bottom: 0;
overflow: hidden;
margin: 0;
width: 100%;
padding: 0 8px;
background-color: #f8f8f8;
}
.am-list {
margin: 0;
}
.am-list > li {
background: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pull-action {
text-align: center;
height: 45px;
line-height: 45px;
color: #999;
}
.pull-action .am-icon-spin {
display: none;
}
.pull-action.loading .am-icon-spin {
display: block;
}
.pull-action.loading .pull-label {
display: none;
}
</style>
</head>
<body>
<div class="page">
<header data-am-widget="header" class="am-header am-header-default">
<h1 class="am-header-title">
同城 - 音乐
</h1>
</header>
<div id="wrapper" data-am-widget="list_news"
class="am-list-news am-list-news-default">
<div class="am-list-news-bd">
<div class="pull-action loading" id="pull-down">
<span class="am-icon-arrow-down pull-label"
id="pull-down-label"> 下拉刷新</span>
<span class="am-icon-spinner am-icon-spin"></span>
</div>
<ul class="am-list" id="events-list">
<li class="am-list-item-desced">
<div class="am-list-item-text">
正在加载内容...
</div>
</li>
</ul>
<div class="pull-action" id="pull-up">
<span class="am-icon-arrow-down pull-label"
id="pull-up-label"> 上拉加载更多</span>
<span class="am-icon-spinner am-icon-spin"></span>
</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../style/js/handlebars.min.js" type="text/javascript"></script>
<script src="../style/js/amazeui.min.js" type="text/javascript"></script>
<script type="text/x-handlebars-template" id="tpi-list-item">
{{#each this}}
<li class="am-list-item-desced" data-id="{{id}}">
<a href="{{alt}}" class="am-list-item-hd" target="_blank">{{title}}</a>
<div class="am-list-item-text">{{content}}</div>
</li>
{{/each}}
</script>
<script type="text/javascript">
/*
iscroll 流程顺序
1.创建dom **dom必须在iscroll实例之前创建否则无法滚动
2.创建iscroll实例
3.设置下滑，上拉的条件
(1).startY startX:开始滑动的X,Y位置.一般用来隐藏刷新页面 默认值 0,0
(2).distY:滑动的绝对距离
(3).directionY: 上一次滑动状态**（1 上拉 -1 下滑 0 未动）
(4).pullStart :设置每次开始滚动的初始值，*用来比较
4.动态的插入data。 **每次dom插入新数据时需要刷新iscroll
*/
$(function(){
createLi(false);
});
function createLi(flg){
var html = [];
for(var i=0;i<13;i++){
html.push('<li class="am-list-item-desced" data-id="1"> ');
html.push('<a href="" class="am-list-item-hd" target="_blank">测试amazeUI</a> ');
html.push('<div class="am-list-item-text">iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。</div>' );
html.push('</li>');
}
var createContent = html.join(" ");
if (flg) {
$('#events-list').append(createContent);
} else {
$('#events-list').html(createContent);
}
}
</script>
<script type="text/javascript">
var myScroll;
var next = 0;
$(function() {
var height = document.body.clientHeight;
height = height < 700 ? 700 : height;
createMyScroll();
//添加手机自带的滑动效果
/*
element.addEventListener(type,listener,useCapture)
基中element是要绑定函数的对象；
type是事件名称，要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”；
listener当然就是绑定的函数了，记住不要跟括号；
最后一个参数是个布尔值，表示该事件的响应顺序。布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
*/
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
});
function createMyScroll() {
var IScroll = $.AMUI.iScroll;
myScroll = new IScroll("#wrapper",{
click:true,
startY:-43,
});
var pullFormTop = false;
var topOffset = -$("#pull-down").outerHeight();
var pullStart=0;//每次滚动的开始位置
// 滑动开始事件 保存每次滑动初始值
myScroll.on("scrollStart",function(){
if (this.y>=topOffset) {
pullFormTop=true;
}
pullStart = this.y;
});
//滑动结束事件 调用下滑 或者上拉
myScroll.on("scrollEnd",function(){
// 当是下滑 and 滑动初始值为dom初值 and 上次滑动为下滑（可以不要）
if(pullFormTop && pullStart=== -43 && this.directionY === -1) {
handlePullDown();
return;
}
// 当当前dom对象的y值大于滑动初始位置时，恢复初始位置
if (this.y >= -43) {
myScroll.scrollTo(0,-43);
return;
}
// 滑动初始值与当前值不等时
if(pullStart != this.y) {
return;
}
//上次滚动是上滑
if (this.directionY === 1) {
handlePullUp();
}
});
}
function handlePullDown() {
var $pullDown = $("#pull-down");
if(!this.queryLoading($pullDown)){
this.setLoading($pullDown)
}
setTimeout(function(){
this.resetLoading($pullDown);
createLi(false);
$("#pull-up-label").html("上拉加载更多");
myScroll.scrollTo(0,-43);
},1000);
};
function handlePullUp() {
console.log('handle pull up');
if (next >= 3) {
$("#pull-up-label").html("没有更多了");
} else {
next++;
createLi(true);
//每次dom插入新数据时需要刷新iscroll
myScroll.refresh();
}
}
this.setLoading = function($el) {
$el.addClass('loading');
};
this.queryLoading= function($el) {
$el.hasClass("loading");
};
this.resetLoading = function($el) {
$el.removeClass('loading');
};
</script>
</body>
</html>
<!--http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html-->
注：知识点在代码中，好好观察吧。友情提示iscroll参数解释： 点击打开链接
1345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
