PageSlider
1.0.0
PageSlider 는 모바일 단말기용 슬라이딩 스크린 구성 요소로, 상하 슬라이딩, 좌우 슬라이딩, 금지된 슬라이딩 및 기타 기능을 지원합니다.
HTML:
< div class =" page-wrap " >
< div class =" page " >
< div class =" title " > page one </ div >
< div class =" subtitle " > page one subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page two </ div >
< div class =" subtitle " > page two subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page three </ div >
< div class =" subtitle " > page three subtitle </ div >
< div class =" arrow " > </ div >
</ div >
< div class =" page " >
< div class =" title " > page four </ div >
< div class =" subtitle " > page four subtitle </ div >
</ div >
</ div >CSS
html , body , . page-wrap {
width : 100 % ;
height : 100 % ;
}
. page {
width : 100 % ;
height : 100 % ;
-webkit-backface-visibility : hidden;
-webkit-perspective : 1000 ;
}구현 원칙상 위와 같은 스타일 설정이 필요합니다.
자바스크립트
new PageSlider ( {
pages : $ ( '.page-wrap .page' )
} ) ; new PageSlider ( {
pages : $ ( '.page-wrap .page' ) , //必需，需要切换的所有屏
direction : 'vertical' , //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 vertical
currentClass : 'current' , //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
gestureFollowing : 'false' , //可选，如果为 true，则开启手势跟随模式
hasDot : 'false' , //可选，生成标识点结构，样式自己控制
preventDefault : true , //可选，是否阻止默认行为
rememberLastVisited : true , //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
animationPlayOnce : false , //可选，切换页面时，动画只执行一次
dev : false , //可选，开发模式，传入具体页面索引值
oninit : function ( ) { } , //可选，初始化完成时的回调
onbeforechange : function ( ) { } , //可选，开始切换前的回调
onchange : function ( ) { } , //可选，每一屏切换完成时的回调
onSwipeUp : function ( ) { } , //可选，swipeUp 回调
onSwipeDown : function ( ) { } , //可选，swipeDown 回调
onSwipeLeft : function ( ) { } , //可选，swipeLeft 回调
onSwipeRight : function ( ) { } //可选，swipeRight 回调
} ) ; prev() 이전 화면next() 다음 화면moveTo(n) 완화 효과를 사용하여 n번째 화면으로 이동합니다.moveTo(n, true) 완화 효과 없이 n번째 화면으로 직접 이동합니다. 일반적으로 페이지 요소의 애니메이션은 다음과 같이 스타일을 통해 제어됩니다.
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider는 다음과 같이 특정 DOM 요소에 직접 애니메이션 바인딩을 지원합니다.
< div class =" title " data-animation =' {"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"} ' >
page two
</ div >
< div class =" subtitle " data-animation =' {"name": "slideToTop", "duration": 800, "delay": 300, "timing-function": "ease", "fill-mode": "both"} ' >
page two subtitle
</ div > PageSlider의 초기 슬라이딩은 화면을 넘기는手势跟随을 직접 결정하는 것인데, 친구가 터치무브를 할 때 페이지를 당겨서 다음 화면을 볼 수 있는 것을 좋아한다고 친구가 말했습니다. 또한 PageSlider에는 이 기능이 없기 때문에 사용을 포기했기 때문에 새 버전에서는 오른쪽에 표시된 대로 설정하기만 하면 됩니다( gestureFollowing: true .
비즈니스의 발전에 따라 화면을 자동으로 슬라이딩하기 전에 사용자의 슬라이딩 이벤트에 응답하지 않고 현재 화면을 잠가야 하는 경우가 있습니다. 이 업데이트는 다음과 같은 잠금 방법을 제공합니다.
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : 뒤로 슬라이딩 금지 data-lock-prev : 앞으로 슬라이딩 금지
때로는 페이지가 뒤로 이동할 때 처음부터 다시 시작하지 않고 마지막으로 건너뛴 페이지로 직접 돌아가고 싶을 때가 있습니다. 오른쪽에 표시된 대로 설정하기만 하면 됩니다. rememberLastVisited: true 는 현재 페이지 인덱스를 localstorage에 저장합니다. 돌아올 때 다음과 같이 조작하기 쉽습니다.
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;이건 개인적인 습관인데, 개발할 때 두 번째 화면 애니메이션을 작성할 때 슬라이드할 필요 없이 새로고침할 때마다 두 번째 화면으로 바로 이동할 수 있도록 첫 번째 화면을 숨기겠다고 가정했습니다. 그런데 5번째 화면 애니메이션을 작성할 때 n-1 화면을 수동으로 숨겨야 합니다. . . . 그러자 리더가 다가와서 XXX야, 네가 한 효과를 보여달라고 했고, 그러면 이전에 숨겨진 것들을 수동으로 표시해야 하고, 10초 후에 계속해서 개발하고 다시 숨겨야 한다. . . . . 인생은 너무 짧아서 견딜 수 없습니다. 따라서 행복하게 발전하려면 다음을 수행하면 됩니다.
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; 때로는 페이지를 되돌릴 때 항목과 같은 애니메이션이 더 이상 실행되지 않기를 바라는 제품 요구 사항이 있을 수 있습니다. 한 번 실행하면 충분합니다. animationPlayOnce: true .
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;이는 각 화면을 고정된 높이로 디자인해야 하는 드문 요구 사항입니다. 작은 화면에서 페이지를 슬라이드할 때 페이지가 직접 넘어가지는 않지만 스크롤이 하단에 도달하면 페이지가 다시 트리거됩니다. 구체적인 효과를 보려면 먼저 뒷면의 해당 QR 코드를 스캔하여 체험해 보세요.
< div class =" page " style =" -webkit-overflow-scrolling: touch; " >
< div class =" page__inner " style =" position: relative; height: 800px; " >
< div class =" title " > page two </ div >
< div class =" subtitle " > page two subtitle </ div >
< div style =" position: absolute; left: 20px; bottom: 10% " > long page </ div >
< div class =" arrow " > </ div >
</ div >
</ div > -webkit-overflow-scrolling: touch; .page 요소에 설정하면 기본적으로 부드러운 스크롤이 실행되어 스크롤 환경이 더욱 편안해집니다. 이를 설정하지 않을 수도 있지만 효과는 매우 다릅니다. 높이 값이 화면보다 큰 경우 이 효과가 실행됩니다. 설정하지 않은 경우 기본값은 직접 하위 요소의 높이를 순회하고 이를 화면 높이와 비교하여 긴 콘텐츠 페이지인지 확인하는 것입니다.
가끔 이런 요구가 있을 때가 있습니다. 페이지에 숨겨진 내용이 있는데 처음 슬라이드할 때 표시해야 합니다. 이때 페이지 넘김을 비활성화한 다음 상호 작용 후에 다시 슬라이드해야 합니다. 페이지 넘기기가 완료되었습니다. 자세한 내용은 아래 예를 참조하세요.
후속 요구사항에 따라 다음 기능을 구현해야 하는지 확인하세요.
字符串전달하는 버그 수정
