PageSlider
1.0.0
PageSlider is a sliding screen component for mobile terminals. It supports up and down sliding, left and right sliding, prohibited sliding and other functions. It also supports AMD modular loading method.
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 ;
}Due to implementation principles, the above style setting is necessary.
JavaScript
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() previous screennext() next screenmoveTo(n) jumps to the nth screen, with an easing effectmoveTo(n, true) jumps directly to the nth screen without easing effect Usually, the animation of elements on the page is controlled through styles, as follows:
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider supports binding animations directly to specific DOM elements, as follows:
< 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 > The initial sliding of PageSlider is relatively simple. It directly determines the gesture to turn the screen. However, a friend likes to be able to pull the page and see the next screen when touchmove. This is手势跟随that my friend said. It also gave up using PageSlider because it did not have this function, so the new version supports it. You only need to set it as shown on the right: gestureFollowing: true .
With the development of business, sometimes it is necessary to lock the current screen and not respond to the user's sliding events. It is necessary to click a button or complete certain operations before automatically sliding the screen. This update provides the following methods for locking:
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : prohibit sliding back data-lock-prev : prohibit sliding forward
Sometimes, when a page jumps back, you want to return directly to the page you jumped to last time without starting over. You only need to set it as shown on the right: rememberLastVisited: true , which will save the current page index to localstorage when you return. It is easy to operate as follows:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;This is a personal habit. When I was developing, I assumed that when writing the second screen animation, I would hide the first screen so that I could go directly to the second screen every time I refreshed it without having to slide. But when I am writing the 5th screen animation, I need to manually hide n-1 screens. . . . Then the leader came over and said, XXX, come, let me see the effect you have done, and then I have to manually display the previously hidden ones. After ten seconds, I continue to develop and hide them again. . . . . Life is so short, I can't stand it. Therefore, you only need to do the following to develop happily:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; Sometimes, there will be product requirements that hope that when the page is turned back, animations such as entry will no longer be executed. Executing it once is enough. You only need to set animationPlayOnce: true .
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;This is a rare requirement that requires each screen to be designed with a fixed height. When sliding the page on a small screen, it does not turn the page directly, but native scrolling. When the scroll reaches the bottom, the page is triggered again. Turn the page. For the specific effect, you can first scan the corresponding QR code at the back to experience it. The specific sample code is as follows:
< 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 > Setting -webkit-overflow-scrolling: touch; on the .page element can trigger native smooth scrolling, making the scrolling experience more comfortable. It is also possible not to set it, but the effect is very different; the inner layer needs to set a height value larger than the screen , this effect will be triggered. If not set, the default is to traverse the height of the direct child elements and compare it with the screen height to determine whether it is a long content page.
Sometimes, you will encounter such a demand. There is some hidden content on the page, but it needs to be displayed when you slide down for the first time. At this time, you must disable page turning, and then slide again after the interaction is completed to turn the page. Here An example is provided for user reference. See the example below for details.
See whether it is necessary to implement the following functions according to subsequent requirements:
字符串in moveTo method
