Iscroll-Implementierung des Tutorials zur Pulldown- und Pullup-Aktualisierung

在原生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

上拉刷新

Ich werde hier nicht näher auf den CSS-Teil eingehen. Wenn Sie interessiert sind, können Sie die Webseite direkt speichern und dann die entsprechenden JS- und CSS-Codes trennen. js- bzw. iscroll-Dateien, andere Bootstrap- und jQuery-Dateien sind alles Frameworks, die ich aus Faulheit hinzugefügt habe.

Instanziieren Sie die obige Struktur:

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

myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });//probeType-Attribut gibt an, dass dieses Plug-in auf Scroll-Ereignisse hören kann myScroll.on("scroll" , function(){ //Scroll-Ereignis kann verwendet werden, um Änderungen im Modul zu steuern, das nach dem Pull-up und Pull-down angezeigt wird. //Stil- und Inhaltsanzeigeteil 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() { //Beim Ziehen nach unten, um die Grenze zu überschreiten und sich der Finger vom Bildschirm wegbewegt, wird dieses Ereignis ausgelöst
if(this.y > 40){ //Ermitteln Sie den Abstand zwischen dem Inhalt und dem Bildschirm
// Sie können den Stil in diesem Abschnitt ändern und er ist auf Ajax oder andere Operationen beschränkt.
// Derzeit wird nur zur Demonstration dieser Funktion nur eine Warnfunktion hinzugefügt.
//Und da die Warnung nachfolgende Animationseffekte blockiert,
//Fügen Sie die folgende Codezeile hinzu, um einen zuvor hinzugefügten Stil zu entfernen
warning("slideDown");
upIcon.removeClass(" reverse_icon");
}
});

myScroll.on("slideUp",function(){ if(this.maxScrollY - this.y > 40 ){ //Gleiche wie slideDown, maxScrollY stellt die maximale Höhe des Dokumentbereichs dar
warning("slideUp");
upIcon.removeClass("reverse_icon")
}
});


Beachten Sie gleichzeitig, dass Sie beim Hinzufügen oder Löschen einiger neuer Elemente mit Ajax erneut myScroll.refresh() verwenden müssen und der maxScrollY-Bereich neu berechnet wird, um die Richtigkeit der Bereichsabdeckung sicherzustellen , wenn Sie es wirklich verwenden, werden Sie auf jeden Fall auf diese Probleme stoßen, daher habe ich hier zu viel zu sagen~~~

OK, der Code ist so. Beim Schreiben dieses Artikels gibt es kein Android-Gerät. Daher habe ich sie nicht getestet. Ich habe nur IOS8-Geräte getestet. Wenn es also Probleme gibt, weisen Sie sie bitte darauf hin, danke ~~

Das obige ist der detaillierte Inhalt vonIscroll-Implementierung des Tutorials zur Pulldown- und Pullup-Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!