PageSlider
1.0.0
PageSlider adalah komponen layar geser untuk terminal seluler. Ini mendukung geser ke atas dan ke bawah, geser ke kiri dan kanan, geser terlarang dan fungsi lainnya.
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 ;
}Karena prinsip penerapannya, pengaturan gaya di atas diperlukan.
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() layar sebelumnyanext() layar berikutnyamoveTo(n) melompat ke layar ke-n, dengan efek easingmoveTo(n, true) melompat langsung ke layar ke-n tanpa efek pelonggaran Biasanya animasi elemen pada halaman dikontrol melalui style, sebagai berikut:
. current . dom {
-webkit-animation : slideToTop 1 s 0.5 s ease both;
}PageSlider mendukung animasi pengikatan langsung ke elemen DOM tertentu, sebagai berikut:
< 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 > Pergeseran awal PageSlider relatif sederhana, langsung menentukan isyarat untuk memutar layar. Namun, sobat suka bisa menarik halaman dan melihat layar berikutnya saat menyentuh手势跟随. Ia juga berhenti menggunakan PageSlider karena tidak memiliki fungsi ini, jadi versi baru mendukungnya. Anda hanya perlu mengaturnya seperti yang ditunjukkan di sebelah kanan: gestureFollowing: true .
Dengan perkembangan bisnis, terkadang layar saat ini perlu dikunci dan tidak merespons peristiwa geser yang dilakukan pengguna. Anda perlu mengklik tombol atau menyelesaikan operasi tertentu sebelum menggeser layar secara otomatis. Pembaruan ini menyediakan metode penguncian berikut ini:
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : melarang menggeser ke belakang data-lock-prev : melarang menggeser ke depan
Terkadang, saat halaman melompat mundur, Anda ingin langsung kembali ke halaman terakhir kali Anda melompat tanpa memulai dari awal. Anda hanya perlu mengaturnya seperti yang ditunjukkan di sebelah kanan: rememberLastVisited: true , yang akan menyimpan indeks halaman saat ini ke penyimpanan lokal. ketika Anda kembali. Mudah dioperasikan sebagai berikut:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;Ini adalah kebiasaan pribadi. Saat saya masih mengembangkan, saya berasumsi bahwa saat menulis animasi layar kedua, saya akan menyembunyikan layar pertama sehingga saya bisa langsung menuju ke layar kedua setiap kali saya menyegarkannya tanpa harus menggesernya. Namun saat saya menulis animasi layar ke-5, saya perlu menyembunyikan n-1 layar secara manual. . . . Kemudian pada saat ini, pemimpin datang dan berkata, XXX, ayo, biarkan saya melihat efek yang telah Anda lakukan, dan kemudian saya harus menampilkan secara manual yang sebelumnya tersembunyi. Setelah lebih dari sepuluh detik, saya terus mengembangkan dan menyembunyikannya lagi. . . . . Hidup ini sangat singkat, saya tidak tahan. Oleh karena itu, Anda hanya perlu melakukan hal berikut untuk berkembang dengan bahagia:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; Terkadang, akan ada persyaratan produk yang berharap ketika halaman dibalik, entri dan animasi lainnya tidak lagi dijalankan. Mengeksekusinya sekali animationPlayOnce: true sudah cukup.
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;Ini adalah persyaratan yang jarang terjadi, yang mengharuskan setiap layar dirancang dengan ketinggian tetap. Saat menggeser halaman di layar kecil, halaman tidak langsung dibalik, melainkan pengguliran asli. Saat gulir mencapai bagian bawah, halaman dipicu lagi ketika halaman digeser. Untuk efek spesifik, Anda dapat memindai terlebih dahulu kode QR yang sesuai di bagian belakang untuk merasakannya.
< 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 > Menyetel -webkit-overflow-scrolling: touch; pada elemen .page dapat memicu pengguliran halus asli, membuat pengalaman pengguliran lebih nyaman nilai ketinggian lebih besar dari screen. , efek ini akan dipicu. Jika tidak disetel, nilai defaultnya adalah melintasi tinggi elemen turunan langsung dan membandingkannya dengan tinggi layar untuk menentukan apakah itu halaman konten yang panjang.
Terkadang, Anda akan menemukan permintaan seperti itu. Ada beberapa konten tersembunyi di halaman, tetapi konten tersebut perlu ditampilkan saat Anda menggeser ke bawah untuk pertama kalinya. Saat ini, Anda harus menonaktifkan pembalikan halaman, lalu menggeser lagi setelah interaksi selesai untuk membalik halaman. Berikut contoh disediakan untuk referensi pengguna.
Lihat apakah perlu untuk mengimplementasikan fungsi-fungsi berikut sesuai dengan persyaratan selanjutnya:
字符串dalam metode moveTo
