iScroll이란 무엇입니까? iScroll 사용 예에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-19 15:38:374226검색
iScroll이 생성되었습니다:
iScroll은 전적으로 iPhone 및 Android 모바일 장치와 같은 모바일 웹킷 브라우저 때문에 생성되었습니다.
iScroll 사용 방법:
iScroll의 원리는 외부 레이어에 오버플로 숨겨진(overflow:hidden;) DOM이 있고 이 영역의 첫 번째 DOM 구조가 인스턴스화되고 래핑된 콘텐츠가 될 수 있다는 것입니다. 수직 또는 수평 스크롤이므로 iScroll을 사용할 때 스크롤 요소는 가능한 한 단순해야 하며 DOM 수를 줄이고 중첩을 줄여야 합니다. DOM 구조가 복잡할수록 iScroll을 실행하기가 더 어려워지기 때문입니다. 이로 인해 일부 노드가 비정상적으로 표시될 수 있습니다. 따라서 권장되는 DOM 구조는 다음과 같습니다.
<p id="wrapper">//overflow:hidden; <ul> //只有第一个DOM结构（ul）被实例化，这个DOM可以纵向或者横向的滚动， //多出的内容会被wrapper的样式hidden。 <li>1</li> <li>2</li> <li>3</li> </ul> </p>
참고: 다시 한번 강조하지만 래퍼의 첫 번째 하위 요소(ul)만 인스턴스화하고 스크롤할 수 있으며 외부 DOM(래퍼)과 결합해야 합니다. 스크롤을 구현합니다.
래퍼에 UL이 여러 개 있으면 어떻게 되나요? 매우 간단합니다. 래퍼의 첫 번째 하위 요소(ul)만 인스턴스화되고 스크롤될 수 있다는 점을 기억하세요.
<p id="wrapper">//overflow:hidden; <p id="first"> //只有第一个DOM结构(ul)被实例化，这个DOM可以纵向或者横向的滚动， //多出的内容会被wrapper的样式hidden <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </p> </p>
보세요, 첫 번째 요소만 인스턴스화됩니다. 참고: 여기에는 첫 번째 DOM 구조의 ID를 작성할 필요가 없습니다. 모든 사람의 식별을 용이하게 하기 위해 ID를 작성했지만 JS를 인스턴스화할 때 필요하기 때문에 가장 바깥쪽 ID(래퍼)를 작성해야 합니다. 다음 ID를 입력하세요:
var myScroll = new iScroll("wrapper");iScroll을 어떻게 인스턴스화해야 하나요?:
인스턴스화에 관해 이야기했으니 언제 인스턴스화해야 할까요? 인스턴스화 방법은 여러 가지가 있다고 하는데 저는 한 번도 사용해 본 적이 없습니다.
(1) HTML 하단에 현재 페이지의 iscroll.js와 uw3c.js를 로드합니다(uw3c.html). ) 페이지(본문 뒤, html 앞) , 이를 통해 HTML DOM 구조를 로드할 수 있습니다.
(2) JS가 페이지 DOM 구조 및 데이터를 삽입하기 전에 iScroll을 인스턴스화합니다. 즉, JS가 나중에 DOM 또는 데이터를 삽입하는 데 사용될 수 있으므로 JS의 맨 처음에 인스턴스화합니다. 이렇게 하면 데이터를 삽입하기 전에 iScroll이 인스턴스화됩니다. . 이 되다.
HTML://HTML 구조
<html > <body> ...code... </body> //插入iscroll.js文件 <script type="text/javascript" src="js/iscroll.js" > </script > //插入本页面JS文件 <script type="text/javascript" src="js/uw3c.js" > </script > </html>
JS://JS 파일 콘텐츠
var myscroll;
function iscroll(data){
//实例化iScroll
myscroll=new iScroll("wrapper");
pageData(data);
}
function pageData(obj){
$("body").html(obj);
myscroll.refresh();//当DOM结构发生变化的时候，需要刷新iScroll
}
iscroll("<p>pagedata</p>");iScroll의 매개변수:
iScroll을 인스턴스화할 때 두 개의 매개변수를 전달할 수 있습니다. 첫 번째 매개변수는 다음과 같습니다. 인스턴스화된 외부 DOM의 ID이고 두 번째 매개변수는 iScroll 실행 메소드의 객체입니다:
var myscroll=new iScroll("wrapper",{hScrollbar:false});
或者
var opts = {
vScroll:false,//禁止垂直滚动
snap:true,//执行传送带效果
hScrollbar:false//隐藏水平方向上的滚动条
};
var myscroll = new iScroll("wrapper",opts);두 번째 매개변수의 내용은 iScroll의 효과를 제어합니다:
hScroll false 禁止横向滚动 true横向滚动 默认为true vScroll false 禁止垂直滚动 true垂直滚动 默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条 默认为true bounce 启用或禁用边界的反弹，默认为true momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动方向的锁定，true拖动只能在一个方向上（up/down 或者left/right）
iScroll의 메소드:
물론, 두 번째 매개변수에는 실행될 수 있는 몇 가지 메소드도 있습니다:
(1)scrollTo(x, y, time, 상대) 메소드: 4개의 매개변수 전달: X축 스크롤 거리, Y축 스크롤 거리, 효과 시간, 현재 위치 기준 여부. 예를 들면 다음과 같습니다.
//在200毫秒的时间内，Y轴向上滚动100像素； uw3c.scrollTo(0, -100, 200) //在200毫秒的时间内，相对于当前位置，X轴向左滚动100像素； uw3c.scrollTo(-100, 0, 200, true)
(2)refresh() 메서드: DOM 구조가 변경된 후 iScroll을 새로 고쳐야 합니다. 그렇지 않으면 스크롤 플러그인이 부정확하게 인스턴스화됩니다.
uw3c.refresh();//刷新iScroll
( 3)onPosChange, 위치 변경을 반환할 수 있는 메서드가 있나요? 사용 중인 iScroll에 onPosChange 메소드가 있는지 확인할 수 있습니다.
onPosChange:function(x,y){
if(y < -200){
//如果Y周向上滚动200像素，$("#uw3c")就显示，否则就隐藏。
$("#uw3c").show();
}else{
$("#uw3c").hide();
}
} (4) onScrollEnd: 스크롤이 끝날 때 이벤트가 실행되도록 하려면 이 메소드를 사용하세요.
//滚动结束后，执行的方法，滚动后会出现提示框alert("phpcn")
onScrollEnd:function(){
alert("phpcn");
} (5) onRefresh: DOM 구조가 변경된 후 iScroll을 새로 고쳐야 합니다. 그렇지 않으면 스크롤 플러그인이 부정확하게 인스턴스화됩니다. onRefresh는 iScroll이 새로 고쳐진 후에 실행되는 방법입니다. .
(6)onBeforeScrollStart: 스크롤을 시작하기 전의 시간 콜백은 브라우저의 기본 동작을 방지하는 것입니다.
(7) onScrollStart: 스크롤을 시작하는 콜백입니다.
(8)onBeforeScrollMove: 콘텐츠가 이동하기 전 콜백입니다.
(9) onScrollMove: 콘텐츠 이동을 위한 콜백입니다.
(10)onBeforeScrollEnd: 스크롤이 끝나기 전 콜백합니다.
(11) onTouchEnd: 손이 화면을 떠난 후 콜백합니다.
(12) onDestroy: 인스턴스를 파괴하기 위한 콜백입니다.
위 내용은 iScroll이란 무엇입니까? iScroll 사용 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!