PageSlider
1.0.0
PageSlider — это компонент скользящего экрана для мобильных терминалов. Он поддерживает скольжение вверх и вниз, скольжение влево и вправо, запрещенное скольжение и другие функции. Он также поддерживает метод модульной загрузки AMD.
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 ;
}Из-за принципов реализации указанная выше настройка стиля необходима.
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() предыдущий экран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 экранов. . . . Потом подошел ведущий и сказал: ХХХ, подойди, покажи, какой эффект ты сделал, а потом мне приходится вручную отображать ранее скрытые. Через десять секунд я продолжаю их развивать и снова скрывать. . . . . Жизнь так коротка, я не могу этого вынести. Поэтому для счастливого развития вам нужно делать только следующее:
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 может запускать плавную прокрутку, делая прокрутку более удобной. Также можно не устанавливать эту настройку, но для внутреннего слоя необходимо настроить совсем другой эффект. Если значение высоты больше, чем screen , этот эффект будет активирован. Если он не установлен, по умолчанию выполняется перемещение по высоте прямых дочерних элементов и сравнение ее с высотой экрана, чтобы определить, является ли это длинной страницей с контентом.
Иногда вы можете столкнуться с таким требованием. На странице есть какой-то скрытый контент, но его необходимо отобразить при первом спуске вниз. В это время необходимо отключить перелистывание страниц, а затем снова прокрутить их после взаимодействия. завершается, чтобы перевернуть страницу. Здесь приведен пример для справки. Подробности см. в примере ниже.
Посмотрите, необходимо ли реализовать следующие функции согласно последующим требованиям:
字符串в методе moveTo.
