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 。これにより、現在のページのインデックスがローカルストレージに保存されます。戻るときは次のように簡単に操作できます。
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;これは個人的な習慣ですが、私が開発していたとき、2 番目の画面のアニメーションを作成するときは、最初の画面を非表示にして、更新するたびにスライドせずに 2 番目の画面に直接移動できると考えていました。しかし、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 > .page要素に-webkit-overflow-scrolling: touch;を設定すると、ネイティブのスムーズ スクロールがトリガーされ、スクロール エクスペリエンスがより快適になります。ただし、効果は内部レイヤーで設定する必要があります。高さの値が screen より大きい場合、この効果がトリガーされます。設定されていない場合、デフォルトでは、直接の子要素の高さをトラバースし、それを画面の高さと比較して、長いコンテンツ ページであるかどうかを判断します。
ページ上に非表示のコンテンツが存在する場合がありますが、このときはページめくりを無効にし、インタラクション後に再度スライドする必要があります。ここでは、ユーザーの参考のために例が示されています。詳細については、以下の例を参照してください。
以降の要件に応じて、次の機能を実装する必要があるかどうかを確認してください。
字符串を渡すバグを修正
