ListRoading은 모바일 풀업 및 풀다운로드 더 많은 구성 요소입니다. 주로 iscroll.js v5.1.2를 기반으로 개발 된 구성 요소에 의존합니다. 기본 라이브러리는 jquery.js 또는 zepto.js를 사용하여 DOM 노드를 작동 할 수 있습니다. 현재 Zepto.js를 기본 라이브러리로 사용하여 DOM을 작동하고 jQuery 플러그인 형식으로 존재합니다. 플러그인으로 사용하지 않으려면 목록 로딩을 필요한 라이브러리로 직접 포팅하면 괜찮습니다. ListRoading은 주로 모바일 단자 용으로 설계되었습니다. 브라우저를 사용하면 스크롤이 제공됩니다. 사용자 경험은 매우 비우호적이며 Android 및 iOS와 매우 다릅니다. 따라서 iscroll.js를 선택합니다. 구현 방법은 CSS3 애니메이션을 사용하여 2D 변환을 사용하여 스크롤 효과를 달성하는 것입니다. 변환 속성은 하드웨어 가속을 사용하며 성능 방법이 크게 향상되었습니다.
NPM 설치
코드 사본은 다음과 같습니다.
NPM 설치 -G 목록 부하
사용 방법은 다음과 같습니다.
1. HTML 구조
생성 된 iscroll과 동일한 구조이지만 지정된 생성 된 요소 노드는 구성 요소에 가입 모드를 게시하려면 식별 가능한 ID가 필요하기 때문에 ID를 지정해야합니다. iscroll은 노드 요소가 생성되기 전에 높이를 설정해야하기 때문에, 그렇지 않으면 스크롤 할 수 없습니다. iScroll이 생성되어 첫 번째 자식 요소에 스크롤 할 수 있도록 할당되므로 ListRoading의 풀업 및 드롭 다운 새로 고침도 첫 번째 자식 요소에 추가됩니다. 사실, 첫 번째 자식 요소를 HTML의 신체로 상상해보십시오.
2. 도입 해야하는 JS
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <scrc = "../ build/listloading.js"> </script>
3. 전화
var m = 3, n = 0; // iscroll을 생성하기 전에 부모 요소의 높이를 설정해야합니다. 그렇지 않으면 iscroll $ ( '#listloading'). height ($ (wind 날짜 (). getTime (); now = nown (now + i*1000000); __ html + = '<li> <span> </span> <p> <time>' + now.gethours () + ':' + now.getminutes () + ':' + now.getseconds () + '</time> listloy' + '</p> <pfin </p> <p> <pf-in rosply. 구성 요소 ... </li> ';} return __html;} // 셀렉터는 ID로 게시해야하기 때문에 var var listloading = $ ('#listloading ')를 사용해야하기 때문에 선택기는 ID 여야합니다. ListLoading ({disabletime : true, // 표시 시간이 필요합니다. createhtml (); if (m <1) {flg = true;} else {$ ( '#order-list'). append (__ html);} // 모든 데이터가 CB (flg)로로드되면 끝이 필요합니다. createhtml ( '#order-list'). html (__ html); // 실행 방법이 실행 된 후 콜백의 함수는 기본 부하가 실행되었다는 것을 알려야합니다. 버블, 클릭 메소드 자체를 작성하는 것이 좋습니다. PreventDefault를 False로 활성화하면이 줄은 Onclick 고장 문제를 해결합니다. 그러나이 값을 열고 WeChat에서 드래그하면 문제가 발생합니다. 슬라이드가 끝나면 스크롤렌드를 트리거 할 수 없습니다. 그래서 나는 이벤트 메소드를 직접 내장했다. listloading.evt ( 'li', 'click', function (dom) {// dom.remove (); // $ ( '#order-list'). Append (createhtml ()); // listloading.refresh ();});복제 다이어그램
/p>
4. API
4.1 새로 고침을 당기십시오
초기화는 주로 iscroll을 생성하기 위해 한 번 실행되며 각 풀다운 새로 고침이 끝나면 각 풀다운 새로 고침이 실행됩니다. 메소드에서 프로그램을 실행 한 후에 실행 된 모든 프로그램을 알리기 위해 콜백 함수를 실행해야하며 Listloading은 자동으로 iScroll Refresh Function을 호출하며 콜백에는 매개 변수 전송이 필요하지 않습니다.
옵션 .pullDownAction = function (cb) {// 새로 고침을 당기십시오 .... // 실행 메소드를 실행 한 후 콜백 CB ()가 실행되어야합니다;}4.2 풀업 새로 고침
새로 고침이 완료된 후 각 풀업 새로 고침이 실행됩니다. 프로그램을 실행 한 후 콜백 함수를 실행하려면 마찬가지입니다. 콜백에는 부울 값이 필요합니다. 그것이 사실이라면, 왜로드되었고 끝까지 끌려갔습니다.
옵션 .pullupaction = function (cb) {// 풀다운 새로 고침 .... // 실행 메소드를 실행 한 후 콜백은 끝 cb (true)로 아래로 내려 가야합니다.4.3 목록 부하를 파괴하십시오
코드 사본은 다음과 같습니다.
ListLoading.destroy ();
4.4 새로 고침 목록 로딩
스크롤 영역 노드에 추가 및 삭제가있는 경우 작업이 완료된 후에이 방법을 호출해야합니다.
코드 사본은 다음과 같습니다.
ListLoading.refresh ();
4.5 시간을 표시할지 시간 기본값 값이 False
실제 풀다운은 시간을 표시합니다. 마지막 새로 고침의 시간
코드 사본은 다음과 같습니다.
옵션 .disabletime = true
4.6 텍스트를 새로 고치려면 당겨집니다
코드 사본은 다음과 같습니다.
옵션 .uploadmoretxt = '텍스트를 새로 고치려면 당기기'; // html 태그를 넣을 수 있습니다
4.7 텍스트를 새로 고치려면 아래로 당기십시오
코드 사본은 다음과 같습니다.
옵션 .pulldrefreshtxt = '텍스트를 새로 고치려면 아래로 드래그'; // html 태그를 넣을 수 있습니다
4.8 중국어로드
코드 사본은 다음과 같습니다.
옵션 .loaderTxt = '중국어가로드 중입니다'; // html 태그를 넣을 수 있습니다
4.9 새로 고침 텍스트를 릴리스합니다
코드 사본은 다음과 같습니다.
옵션 .realtimeTxt = '릴리스 텍스트 텍스트 릴리스'; // html 태그를 내부에 넣을 수 있습니다
4.10 모든 텍스트가로드되었습니다
코드 사본은 다음과 같습니다.
옵션 .loaderEndtxt = '모든 텍스트가로드되었습니다'; // html 태그를 넣을 수 있습니다
4.12 Iscroll 구성
코드 사본은 다음과 같습니다.
옵션 .iccrolloptions = {};
위는 Listloading.js Mobile Terminal Pull-Down Refresh Component가 편집기가 소개합니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!