最新在做一个微信商城有用到商铺列表展示，需要使用滑动上拉加载数据，就使用了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插入新数据时需要刷新iscrollmyScroll.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参数解释：点击打开链接
![下拉加载 实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果](https://700zi.400zi.cn/uploadfile/img/14/809/0580c9db933df651bbab24da2b79d60d.jpg)
