iScroll 中怎么判断滚动条滚到顶部或底部了

nandy007
   2015-03-12 15:09:25发布  2016-12-19 08:57:28更新 0收藏, 7009浏览
WebAPP技术
0

在做移动应用webapp的时候,需要判断滚动条滚动到顶部还是底部,而如果使用了iScroll,则源码中没有回调可以直接判断滚到底部或者顶部,这里介绍两种方法:

方法一:可以在滚动结束函数中进行判断

比如:

scroll = new iScroll('index_content', {
                useTransition: true,
                topOffset: pullDownOffset,
                onRefresh: function () {
                        if (pullDownEl.className.match('loading')) {
                                pullDownEl.className = '';
                                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉获取上一页数据';
                        } else if (pullUpEl.className.match('loading')) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载下一页数据';
                        }
                },
                onScrollMove: function () {
                        //console.log('this.y=' this.y);
                        if (this.y > 5 && !pullDownEl.className.match('flip')) {
                                pullDownEl.className = 'flip';
                                pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开来加载上一页数据';
                                this.minScrollY = 0;
                        } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                                pullDownEl.className = '';
                                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉获取上一页数据';
                                this.minScrollY = -pullDownOffset;
                        } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                                pullUpEl.className = 'flip';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开来加载下一页数据';
                                this.maxScrollY = this.maxScrollY;
                        } else if (this.y > (this.maxScrollY   5) && pullUpEl.className.match('flip')) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载下一页数据';
                                this.maxScrollY = pullUpOffset;
                        }
                },
                onScrollEnd: function () {
                        if (pullDownEl.className.match('flip')) {
                                pullDownEl.className = 'loading';
                                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';                                
                                if(pageno>0)
                                {
                                        pageno-=2;
                                        createNextPageJs();        // Execute custom function (ajax call?)
                                }else{
                                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '已经到第一页';
                                        setTimeout('myTouch.scroll.refresh()',1000);
                                }
                        } else if (pullUpEl.className.match('flip')) {
                                pullUpEl.className = 'loading';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';                        
                                createNextPageJs();        // Execute custom function (ajax call?)
                        }
                }
        });



方法二:可以修改iscroll的源码,添加滚动象限函数(试用与iScroll4)

比如:

that.options里面添加事件名 (Line 139)

onScrollLimit: null

函数_move 结尾添加  (Line 490)

if (newY<that.maxScrollY) that.options.onScrollLimit.call(that, e);

函数 _startAni 结尾添加 (Line 768)

if (step.y<that.maxScrollY) that.options.onScrollLimit.call(that);

无论是滚动开始还是滚动结束,都会触发事件,而且是很多次。

下面是初始化例子。

myScroll = new iScroll('view', {onScrollLimit: function(){
    console.log("I've past the end!");
}});

这样就完成了新事件的添加

下载APP
扫码下载栗子社区APP