풀다운 및 풀업 새로 고침 튜토리얼의 Iscroll 구현

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

上拉刷新

여기에서는 CSS 부분에 대해 자세히 설명하지 않겠습니다. 관심이 있으시면 웹페이지를 직접 저장한 다음 해당 JS 및 CSS 코드는 iscroll.js 및 iscroll.css입니다. 기타 Bootstrap과 jQuery는 모두 제가 게으름 때문에 추가한 프레임워크입니다.

위 구조를 인스턴스화합니다:

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

myScroll = new IScroll('# 래퍼', { 프로브 유형: 3, mouseWheel: true }); // 프로브 유형 속성은 이 플러그인이 스크롤 이벤트를 모니터링할 수 있음을 나타냅니다. myScroll.on("scroll", function(){ // 스크롤 이벤트를 사용하여 풀업을 제어할 수 있습니다. 그리고 풀다운 이후에 표시되는 모듈에서는
//스타일 및 콘텐츠 표시 변경
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"); }else if(maxY < 40 && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon"); return "";
}
});

myScroll.on("slideDown",function( ){ //풀다운으로 인해 경계가 초과될 때 손가락이 화면에서 멀어지면 이벤트가 트리거됩니다.
if(this.y > 40){ //콘텐츠와 콘텐츠 사이의 거리를 가져옵니다. screen
//이 섹션에서는 스타일을 수정하고 ajax 또는 기타 작업만 사용할 수 있습니다.
//이 기능을 보여주기 위해 경고 함수만 추가됩니다.
//그리고 경고는 후속 애니메이션을 차단합니다. 효과, ,
//이전에 추가된 스타일을 제거하기 위해 다음 코드 줄을 추가했습니다
Alert("slideDown");
upIcon.removeClass("reverse_icon");
}
});

myScroll.on(" SlideUp ",function(){ if(this.maxScrollY - this.y > 40){ //slideDown과 동일, maxScrollY는 문서 영역의 최대 높이를 나타냅니다
Alert("slideUp");
upIcon.removeClass("reverse_icon ")
}
});

동시에 ajax를 사용하여 일부 새 요소를 추가하거나 삭제할 때 myScroll.refresh()를 다시 수행해야 하며 maxScrollY 영역은 다음과 같이 다시 계산됩니다. 영역의 정확성을 확보하세요. 실제로 이런 것들을 사용한다면 분명히 이러한 문제에 직면하게 될 것입니다. 그래서 여기서는 너무 많이 이야기하고 있습니다 ~~

좋아요, 코드는 이 글을 쓸 때 I don' 옆에 있습니다. 안드로이드 기기가 없어서 테스트는 안해봤고 IOS8 기기만 테스트해서 문제 있으면 지적해주세요~~ 감사합니다~~

위 내용은 풀다운 및 풀업 새로 고침 튜토리얼의 Iscroll 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!