Implémentation Iscroll du didacticiel d'actualisation déroulant et pull-up

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

上拉刷新

Je n'entrerai pas ici dans les détails de la partie CSS. Si vous êtes intéressé, vous pouvez directement enregistrer la page Web puis séparer les codes pertinents. Les codes JS et CSS correspondants sont iscroll. js et iscroll respectivement. Les fichiers .css, les autres bootstrap et jQuery sont tous des frameworks que j'ai ajoutés à cause de ma paresse.

Instancier la structure ci-dessus :

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

myScroll = new IScroll('#wrapper', {probeType: 3, mouseWheel: true });//l'attributprobeType indique que ce plug-in peut écouter l'événement de défilement myScroll.on("scroll" ,function(){ //L'événement Scroll peut être utilisé pour contrôler les changements dans la partie d'affichage du style et du contenu du module affiché après le pull-up et le pull-down
var y = this.y,
maxY. = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon"); !downHasClass && downIcon.addClass("reverse_icon"); return "";
}else if(y < 40 && y > 0){
downHasClass && downIcon.removeClass("reverse_icon"); ";
}
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( ){ //Lorsque vous tirez vers le bas pour dépasser la limite, si le doigt s'éloigne de l'écran, cet événement sera déclenché
if(this.y > 40){ //Obtenir la distance entre le contenu et l'écran
//Vous pouvez modifier le style dans cette section, et cela est limité à ajax ou à d'autres opérations
//Pour le moment, juste pour démontrer cette fonction, seule une fonction d'alerte est ajoutée.
//Et, puisque alert bloquera les effets d'animation ultérieurs,
//Ajoutez la ligne de code suivante pour supprimer un style précédemment ajouté
alert("slideDown");
upIcon.removeClass(" reverse_icon");
}
});

myScroll.on("slideUp",function(){ if(this.maxScrollY - this.y > 40 ){ //Identique à slideDown, maxScrollY représente la hauteur maximale de la zone du document
alert("slideUp");
upIcon.removeClass("reverse_icon")
}
});


Dans le même temps, veuillez noter que lorsque vous utilisez ajax pour ajouter ou supprimer de nouveaux éléments, vous devez re-myScroll.refresh() et la zone maxScrollY sera recalculée pour garantir l'exactitude de la couverture de la zone. , si vous l'utilisez vraiment, vous rencontrerez certainement ces problèmes, donc ici j'ai trop de choses à dire~~~

OK, le code est comme ça Lors de la rédaction de cet article, il n'y a pas d'appareils Android, je ne les ai donc pas testés. Je n'ai testé que les appareils IOS8, donc s'il y a des problèmes, merci de les signaler, merci~~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!