AMAZEUI之iscroll 下滑刷新/上拉加载更多实例

最新在做一个微信商城有用到商铺列表展示，需要使用滑动上拉加载数据，就使用了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参数解释：点击打开链接

AMAZEUI之iscroll 下滑刷新/上拉加载更多实例相关推荐

Android滑动冲突解决方式(下拉刷新上拉加载更多,适配RecyclerView/ListView/ScrollView)
一.Android事件的分发机制这里需要了解下Andorid事件的分发机制.事件分发一般是针对一组事件,即ACTION_DOWN > ACTION_UP 或 ACTION_DOWN > ...
react-native 自定义下拉刷新 / 上拉加载更多组件
1.封装 Scroller 组件 src/components/Scroller/index.js /*** 下拉刷新/上拉加载更多组件(Scroller)*/ import React, {Com ...
android 列表上拉加载更多,Android 下拉刷新,上拉加载更多控件–支持ListView,GridView和ScrollView...
麦洛遇到这样一个需求,实现类似于IOS下拉刷新,上拉加载更多的控件.麦洛google,baidu了一番,网上有不少实现,比较常见的是国外牛人的实现,不过国外的实现基本上都是扩展于ListView,所以 ...
ajax 下拉刷新上拉加载更多,局部刷新iscroll控件的具体使用（下拉刷新，上拉加载更多）...
标签下,这是调用iscroll的必要条件,否则会出现不能刷新或者不能滑动页面的情况.此外还有商量刷新及下拉刷新的标签,在iscroll中有这两个标签的样式,若不想用默认的样式,也可通过覆盖的方式添加其 ...
Flutter listview下拉刷新上拉加载更多功能实现
下拉刷新在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flu ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Android项目：使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法，监听listview滚动方向...
很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷 ...
微信小程序下拉刷新/上拉加载更多
查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部, 在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页 ...
materialrefeshlayout下拉刷新,上拉加载更多
1.添加依赖:compile 'com.cjj.materialrefeshlayout:library:1.3.0' 2.布局中添加控件,包裹list控件 <com.cjj.Materi ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...

AMAZEUI之iscroll 下滑刷新/上拉加载更多实例

AMAZEUI之iscroll 下滑刷新/上拉加载更多实例相关推荐

最新文章

热门文章