머리말
이전 섹션에서는 풀다운 새로 고침 및 풀업로드를 사용해야하는 모바일 프로젝트가있었습니다. 내 마음의 첫 번째 반영은 Weibo의 효과였습니다. 처음에는 이해에 약간의 편차가있었습니다. 풀다운이 추가 데이터라고 생각했으며 풀업은 추가 데이터라고 생각했습니다. 나중에, 나는 동료들에게 물었고 풀다운은 최신 데이터의 새로 고침 일 뿐이며 풀업은 부속 데이터라는 것을 알았습니다.
사용 팁
1. ISCROLL.JS를 참조하고 초기화 중에 두 개의 이벤트 청취를 추가하십시오 : 터치 모브 및 domContentLoaded.
2. Iscroll 플러그인의 onscrollend 이벤트를 구현하십시오. 즉,이 경우 데이터를 새로 고치고 추가하려면 자신의 AJAX 메소드에 전화하십시오.
3. 백그라운드에서 더 많은 요청을 끌어 내고로드 할 때는 페이징 요청 데이터와 같습니다. 현재 AJAX 요청 중에 PageIndex 매개 변수를 전송해야하며로드를 초기화 할 때 전경이 판단하기 위해 배경에서 PageCount를 반환해야합니다.
4. 가장 중요한 것은 풀다운 새로 고침 메소드 (풀 다운) 및 풀업로드 (풀업) 메소드를 구현하는 것입니다.
실행 효과 다이어그램
구현 방법
var myscroll, 풀다운, 풀다운 오프셋, 풀 루프, 풀 루프 셋, 생성 count = 0;/** * 풀다운 새로 고침 (이 메소드를 사용자 정의) * myscroll.refresh (); 데이터가로드되면 인터페이스 업데이트 메소드 */function pulldownaction () {settimeout (function () {var el, li, i; el = docum el.childnodes [0]);} myscroll.refresh (); }/** * 스크롤 및 페이지를 돌립니다 (이 메소드를 사용자 정의) * myscroll.refresh (); // 데이터로드 후 인터페이스 업데이트 메소드를 호출하십시오*/function pulrupaction () {settimeout (function () {// <- 네트워크 혼잡을 시뮬레이션하고 생산에서 settimeout을 제거하십시오! var el, li, i; el = document.getElementById ( 'thelist'); for (i = 0; i <3; i ++) {li = li = li '); (++ 생성 Count); Li, el.childnodes [0]); }/*** iscroll 컨트롤 초기화*/function loaded () {pulldownel = document.getElementById ( 'pulldown'); PUTRDOWNOFFSET = pullDownel.OffSetheight; pullUpel = document.getElementById ( '풀업'); PullUpoffset = PullUpel.offSetheight; myscroll = new iscroll ( 'Wrapper', {scrollbarclass : 'myscrollbar', Usetransition : false, topoffset : pulldownoffset, onrefresh : onrefresh : oneRefresh : oneRefresh : function () {if (pulldownel.className.match ( 'loading')) {pulldownel.className = ''; QueryLel.queryLel. = 'PullDown Refresh ...'; ! puldown.classname.match ( 'flip')) {pulldownel.classname = 'flip'. PullDown.ClassName = ''; pullupel.querySelector ( '. pullUplabel'). innerhtml = '제쳐두고 업데이트를 시작합니다 ...'; pullupel.querySelector ( '. pullUplabel'). innerhtml = 'pull load ...'; PullDown.QuerySelector ( '. PullDownLabel'). innerhtml = '로드 ...'; pullUpaction (); // ajax call}}); settimeout (function () {document.getElementById ( 'Wrapper'). Style.left = '0';}, 800);} // 바인딩 ISCROLL CONTROL DOCUPEN.ADDEVENTLISTERNE ( 'TouchMove', function (e) {e.preventDefault ();}, Doccount);요약
가장 중요한 것은 ISCroll에서 일부 초기화 작업을 수행하고 다른 작업에 대한 다른 프롬프트 정보를 표시 한 다음 해당 새로 고침을 작성하고 풀다운 및 풀업 이벤트를위한 더 많은 처리 방법을로드하는 것입니다.