이 글에서는 주로 Iscool 풀다운 새로 고침 기능을 구현하는 방법(권장)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
간단한 풀다운 새로 고침 구현 방법
css 스타일:
*{ margin: 0px; padding: 0px; } #wrapper{ width: 100%; height: 150px; border: 1px solid red; overflow: hidden; position: absolute; } #shua{ text-align: center; }
HTML 코드
<p id="wrapper"> <p> <p id="shua">刷新</p> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </p> </p>
js 코드를 작성하기 전에 jQuery 플러그인과 iscroll 플러그인을 도입해야 합니다
그러면 js 코드는 다음과 같습니다.
//给内容添加滚动事件 var a=new IScroll("#wrapper",{ scrollbars:true, mouseWheel:true, interactiveScrollbars:true, // scrollX:true, // freeScroll:true, probeType:2, }) //让文字先隐藏 $("#shua").hide(); var x=0; a.on("scroll",function(){ if(x==0){ if(this.y>40){ $("#shua").show(); $("#shua").text("松开手进行刷新") x=1; } a.on("scrollEnd",function(){ if(x==1){ $("#shua").text("正在刷新") setTimeout(shuju,1000) x=2; } }) var z=0; function shuju(){ if(x==2){ $("#shua").hide(); $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++)) a.refresh() x=0; } } } }) </script>
이렇게 하면 간단한 풀다운 새로고침이 완료됩니다! !
관련 권장 사항:
dropload.js 플러그인 풀다운 새로 고침 및 풀업 로딩 방법
예제는 더 많은 풀다운 새로 고침 데이터를 로드하는 mui 풀업의 캡슐화 프로세스를 자세히 설명합니다
WeChat 애플릿 목록 풀다운 새로고침 및 풀업 로딩 구현 방법 분석
위 내용은 Iscool 풀다운 새로 고침 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!