Iscroll implementation of pull-down and pull-up refresh tutorial

在原生APP的开发中，有一个常见的功能，就是下拉刷新的功能，这个想必大家都是知道的，但是原生APP的开发，有一个很大的问题就是，你每次更新一些功能，就要用户重新下载一次版本，尤其是在iOS系统中，新版本还需要经过审核才能通过，这就使得版本的更新受到很大的限制，而如果我们改用网页来展示，那么只要改变服务器中网页的内容，那么就等于修改了APP的内容展示，有更灵活的满足更新版本。

概述

但是有一点就是，如何让web实现的页面，看起来更像是原生的APP呢，首先要想办法解决的就是下拉刷新的功能，对于这个功能，我并没有在网络上找到很好的解决方法，并且，我个人对手机端的开发，经验还是有些欠缺，这里就不罗列使用js实现web页下拉刷新的功能了。

这里，我基于iscroll5的基础上，进行了少量的改动源代码，进而实现了下拉属性的功能，所以分享在这里，仅供参考。

关于iscroll插件

iscroll插件（官网地址）当前最新的版本是version 5版本，相对于版本4，我个人觉得，版本5变得更具有灵活性，虽然移除了一些特定的事件，特定的对外接口，但是对于使用该插件的程序员们，这个插件变得更具有操控性，这是我比较喜欢的一种插件类型，但同时，也发现了一些问题，事件中的touchend事件，不存在了（确切的说，不能说是不存在），只是被拦截了，所以一些基本的事件，都被进行了拦截，而导致无法监听到touchend事件，只能检测到scrollEnd事件，scrollEnd事件，是在页面滚动停止时，才会被触发的，所以~~

所以，根据版本5，无法检测到，是不是下拉了一段距离之后，松开时的动作了，对此，我也检查了源代码，也没有发现这个功能的实现方法，不得已，只能对源代码进行了少量的修改，所以就有了本篇文章。

修改后插件的使用

基本上，该方法并没有进行多少的修改，只是添加了两个事件的监听类型，一个叫做“slideDown”，表示下拉被触发，另一个叫做“slideUp”，表示上拉被触发。

其他，实例化中，各属性都没有进行更改，所以，关于iscroll的使用，直接参考官网的说明：iscroll官网。

这里，我只对新添加的事件，添加一个demo测试，这个demo是一个很简单的demo，也只是用来说明新添加事件的用法的，如果需要用到下拉刷新或者上拉刷新的朋友，可以根据本demo自行修改。

下拉刷新

• Pretty row 1


• Pretty row 2


• Pretty row 3


• Pretty row 4


• Pretty row 5

...
• Pretty row 46


• Pretty row 47


• Pretty row 48


• Pretty row 49


• Pretty row 50

上拉刷新

I won’t go into details about the CSS part here. If you are interested, you can save the webpage directly and then separate the relevant codes. The corresponding JS and CSS codes are iscroll.js and iscroll respectively. .css files, other bootstrap and jQuery are all frameworks I added because of my laziness.

Instantiate the above structure:

var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon ");

myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });//probeType attribute indicates that this plug-in can listen to the scroll event myScroll.on("scroll" ,function(){ //Scroll event can be used to control changes in the module displayed after pull-up and pull-down.
//Style and content display part
var y = this.y,##. # maxY = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon");
if(y >= 40){
!downHasClass && downIcon.addClass("reverse_icon"); return "";
}else if(y < 40 && y > 0){
downHasClass && downIcon.removeClass("reverse_icon"); return "";
}
if(maxY >= 40){
!upHasClass && upIcon.addClass("reverse_icon"); return "";
}else if(maxY < 40 && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon"); return "";
}
});

myScroll.on("slideDown", function(){ //When the pull-down causes the boundary to exceed, if the finger moves away from the screen, the event will be triggered
if(this.y > 40){ //Get the distance between the content and the screen
//You can modify the style in this section, and it is limited to ajax or other operations.
//At this time, just to demonstrate this function, only an alert function is added.
//And, since alert will block subsequent animation effects,
//Added the following line of code to remove a previously added style
alert("slideDown");
upIcon.removeClass("reverse_icon");
}
});

myScroll.on("slideUp",function(){ if(this.maxScrollY - this.y > 40 ){ //Same as slideDown, maxScrollY represents the maximum height of the document area
alert("slideUp");
upIcon.removeClass("reverse_icon")
}
});

At the same time, please note that when you use ajax to add or delete some new elements, you need to re-myScroll.refresh(), and the maxScrollY area will be recalculated to ensure the correctness of the area coverage. These things , if you really use it, you will definitely encounter these problems, so here I am talking too much~~~

OK, the code is like this. When writing this article, there is no Android devices, so I did not test it. I only tested IOS8 devices, so if there are any problems, please point them out, thank you~~

The above is the detailed content of Iscroll implementation of pull-down and pull-up refresh tutorial. For more information, please follow other related articles on the PHP Chinese website!