Ionic melaksanakan gelongsor klik buku alamat tiruan dan $ionicscrolldelegate analisis penggunaan_jquery

Pengenalan

Dalam Noah Wealth Project, buku alamat digunakan Jika sekadar pandangan yang mudah, saya secara peribadi berpendapat ia mungkin terlalu monoton, jadi atas dasar tontonan, klik dan slaid. kesan ditambah. Terdapat dua tujuan: 1. Pengalaman yang baik. 2. Buku alamat mempunyai sejumlah besar data Apabila kita mengklik pada modul dan meluncurkan modul ke atas, julat yang boleh dilihat juga akan menjadi lebih besar.

Kesan

Klik modul dan halaman akan mula meluncur ke atas sehingga modul berada di bahagian atas halaman.
Ini adalah tempat sebelum mengklik Kami klik pada pusat operasi:

Selepas mengklik, akan ada animasi gelongsor untuk meluncurkan modul ini ke atas:

Pelaksanaan

Dapatkan elemen dan jana id secara dinamik
Apabila kita mengklik pada elemen, kita perlu memberitahu program di mana kita mengklik, yang khusus untuk p, bukan kita tempat klik jari.
Seperti yang diperkenalkan dalam wiki sebelum ini, format data yang dikembalikan oleh antara muka ialah tatasusunan satu dimensi Apabila menukar kepada tatasusunan berbilang dimensi, data perlu dilalui sekali, kita boleh menambah id setiap keping data.

scrolltop dalam Jquery

Secara amnya semua orang akan memikirkan kaedah menggunakan jquery ini,

Kaedah penggunaannya ialah:

<p><br/></p>

Ini boleh merealisasikan gelongsor, tetapi semasa penggunaan, saya mendapati bahawa: apabila mengklik pada modul yang sama, jarak klik dan gelongsor adalah berbeza pada kedudukan gelongsor yang berbeza, dan kandungan tergelincir ke lapisan atas tidak boleh tergelincir ke belakang Ini tidak konsisten dengan keperluan kami sangat tidak konsisten.

Kami juga menyelidik beberapa pemalam lain, tetapi tiada satu pun daripada mereka boleh mencapai kesan yang kami inginkan. Adakah rangka kerja ionik yang berkuasa itu akan memberikan kami kaedah sedemikian?

$ionicScrollDelegate

Mewakilkan kawalan paparan skrol (dicipta melalui arahan ion-cent dan ion-scroll).

Kaedah ini dicetuskan secara langsung oleh perkhidmatan $ionicScrollDelegate untuk mengawal semua paparan skrol. Gunakan kaedah $getByHandle untuk mengawal paparan skrol tertentu.

$(selector).scrollTop(offset)

Ini mengandungi lebih banyak kaedah, antaranya kaedah resize() akan sering digunakan dalam ng-if Selain itu,

ia menyediakan kaedah untuk mendapatkan ketinggian skrol semasa skrin. getPositionScroll( ):

getScrollPosition()

• Kembali: Kedudukan di mana objek menatal ke paparan ini, dengan sifat berikut:

o {value} left Jarak dari kiri ke skrol pengguna (bermula pada 0).

o {Nombor} atas Jarak dari bahagian atas ke tempat pengguna telah menatal (bermula pada 0).

Di sini kita hanya perlu menggunakan ketinggian menegak, jadi gunakan $ionicScrollDelegate.getPositionScroll().top untuk mendapatkan ketinggian skrol semasa.

ScrollTo dan scrollBy

Kedua-dua kaedah ini adalah serupa dengan hubungan antara laluan mutlak (scrollTo) dan kedudukan relatif (scrollBy).

Kami mendapat kedudukan modul yang sedang diklik menggunakan kaedah berikut:

document.getElementById(x.id).offsetTop

Apa yang kami dapat di sini ialah kedudukan p ini dari atas, Tetapi keperluan kami setiap kali ialah kami mahu modul yang kami klik untuk meluncur ke bahagian atas skrin, bukan bahagian atas keseluruhan kandungan, jadi adalah lebih baik untuk kami menggunakan scrollBy di sini.

Dalam kes ini, anda hanya perlu mengalihkan jarak dari bahagian atas skrin ke modul yang diklik setiap kali kaedahnya ialah:

var scroll = document.getElementById(x.id. ).offsetTop - $ionicScrollDelegate. getScrollPosition().top;

Kemudian panggil kaedah tatal ionicBy dalam kaedah klik:

$ionicScrollDelegate.resize();

$ionicScrollyDelegate (0,scroll ,true);

Setakat ini, fungsi ini telah dilaksanakan, semoga dapat membantu semua.

Ini adalah penghujung artikel ini Ionic telah melaksanakan tiruan klik buku alamat dan analisis penggunaan $ionicscrolldelegate.