phonegap开发--基于iscroll4实现下拉刷新等问题解析

来源：互联网发布：淘宝金牌卖家条件编辑：程序博客网时间：2024/06/11 01:05

phonegap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。在此不多介绍phonegap，默认读者以可以初步了解phonegap并开发相应app.

iscroll4 是一个基于安卓提供一种原生的方式来支持在一个固定高度的容器内滚动内容。不过原生滚动并不是那么好做的。。所以将就用吧。。肯定比你不用iscroll4的滑动更像原生.

iscroll4的下拉刷新是基于容器的onScrollMove事件,判断滚动垂直初始位置（负值）来判断是否需要刷新,

例:

<script>var myScroll =new iScroll("wrapper",{topOffset: 50,onRefresh: function(){                             if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('#pullDown-approval .pullDownLabel').innerHTML = '下拉刷新...';     }                        },onScrollMove: function(){                               if (this.y > 120 && !pullDownEl.className.match('flip')) {pullDownEl.className = 'flip';pullDownEl.querySelector('#pullDown-approval .pullDownLabel').innerHTML = '松开刷新...';this.minScrollY = 100;} else if (this.y <= 125 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('#pullDown-approval .pullDownLabel').innerHTML = '下拉刷新...';this.minScrollY = 0;}                         },onScrollEnd: function(){                            if (pullDownEl.className.match('flip')) {this.minScrollY = 100;pullDownEl.className = 'loading';pullDownEl.querySelector('#pullDown-approval .pullDownLabel').innerHTML = '加载中...';                                        // Execute custom function (ajax call?)                                        myScroll.refresh();}                         }});</script>

在onScrollMove事件中判断this.y来确定下拉多少会显示松开刷新，并标记滑动结束后是否加载刷新事件，且改变提示! 注意:onScrollMove是一个移动事件，当你手在屏幕上滑动时，都会触发这个事件!

在onSrollEnd 里做检测判断是否可以做刷新事件，刷新完毕调用refresh刷新方法，使头部提示隐藏!

上方所有class选择器，都可以不用定义样式，只是为了做标记而用。若定义样式也无不可.

this.minScrollY 是控制当前scroll对象容器的最小滑动值,可以达到不反弹的效果

topOffset 已经滚动的基准值，用于隐藏头部提示

若要实现上拉刷新，在onScrollEnd 方法里控制this.minScrollY值来处理即可

0 0