Vue menyedari bahawa senarai itu tidak meluncur dengan lancar selepas ditekan lama

Kata Pengantar

Vue ialah rangka kerja JavaScript moden untuk membina antara muka pengguna. Ia menyepadukan dengan lancar ke dalam projek sedia ada dan menyediakan cara yang elegan untuk membina aplikasi web interaktif melalui kefungsian yang kaya dan API yang mudah dipelajari. Dalam artikel ini, kami akan membincangkan masalah yang mungkin menyebabkan gelongsor menjadi tidak lancar apabila menggunakan Vue untuk melaksanakan tekan lama dan kemudian meluncur senarai, dan memberikan penyelesaian.

Penerangan Masalah

Apabila kami menggunakan komponen senarai dalam Vue, kami mungkin menghadapi keperluan untuk meluncur lebih banyak pilihan selepas menekan lama item senarai. Keperluan ini boleh dicapai menggunakan acara mula sentuh, gerak sentuh dan akhir sentuh, tetapi dalam beberapa kes akan terdapat masalah dengan item senarai meluncur tidak lancar. Manifestasi khusus ialah apabila menekan lama dan kemudian meluncur, item senarai jelas tersekat dan kelewatan.

Analisis Masalah

Apabila kita menekan lama item senarai dan meluncurkannya, mekanisme pemaparan di dalam Vue akan menyebabkan penyekatan, mengakibatkan gelongsor yang tidak lancar. Apabila kita melakukan operasi tekan lama, peristiwa Sentuh akan dicetuskan dan pemasa akan dimulakan Pemasa digunakan untuk menentukan sama ada peristiwa tekan lama dicetuskan. Semasa pemasa, jika pengguna melakukan operasi leret, acara Touchmove akan dicetuskan dan tingkah laku menatal lalai bekas akan dihalang. Walau bagaimanapun, kerana Vue menggunakan cara tak segerak untuk mengemas kini DOM, jika pengguna meluncur terlalu cepat atau terdapat terlalu banyak item senarai, Vue mungkin tidak dapat mengemas kini DOM tepat pada masanya. Dengan cara ini, ketinggalan dan kelewatan akan sangat mempengaruhi pengalaman pengguna.

Penyelesaian

Untuk menyelesaikan masalah ini, kita boleh menggunakan dua kaedah berikut:

1. Debounce

Debounce ialah Kaedah untuk menyelesaikan masalah prestasi yang disebabkan oleh peristiwa yang sering mencetuskan dalam JavaScript. Prinsip pelaksanaan ialah dalam masa yang ditetapkan, hanya peristiwa yang dicetuskan terakhir akan dilaksanakan. Kita boleh menggunakan kaedah _.debounce() yang disediakan dalam Lodash.js untuk mencapai kesan ini.

Cara untuk menggunakan nyahpantun adalah dengan memulakan pemasa dalam acara Mula Sentuh Jika tiada gelongsor dalam tempoh masa tertentu, ia akan dinilai sebagai acara tekan lama dan mod gelongsor akan dihidupkan. . Dalam mod gelongsor, pemasa ini akan dipanggil setiap kali peristiwa Touchmove dicetuskan Jika gelongsor melebihi julat tertentu, ia akan dinilai sebagai operasi gelongsor dan mod tekan lama akan dibatalkan. Disebabkan kaedah nyahlantun, apabila operasi gelongsor kami terlalu pantas, hanya acara terakhir akan dilaksanakan, yang boleh mengelak daripada menjejaskan prestasi dan menyebabkan gelongsor tidak lancar.

2. Tatal maya

Tatal maya ialah teknologi tatal maya yang hanya memaparkan item senarai dalam kawasan yang boleh dilihat dan bukannya memaparkan kesemuanya semasa menatal. Pendekatan ini boleh meningkatkan prestasi senarai dengan ketara, terutamanya apabila bilangan item senarai adalah besar. Tatal maya boleh dilaksanakan menggunakan komponen vue-virtual-scroll-list.

Cara untuk menggunakan komponen vue-virtual-scroll-list ialah anda perlu terlebih dahulu menghantar data item senarai ke dalam komponen sebagai prop, dan menentukan beberapa sifat dalam komponen, seperti ketinggian item (ketinggian setiap item senarai), jumlah (bilangan item senarai), dsb. Kemudian, komponen hanya akan memaparkan item senarai dalam kawasan yang boleh dilihat semasa membuat persembahan, dan kawasan yang kelihatan akan dilaraskan secara dinamik apabila menatal. Ini boleh mengelak daripada memaparkan terlalu banyak item senarai dan menyebabkan gelongsor lancar.

Ringkasan

Apabila menggunakan Vue untuk melaksanakan gelongsor selepas menekan lama pada senarai, ia mungkin menyebabkan masalah gelongsor tidak lancar. Terdapat dua cara untuk menyelesaikan masalah ini Salah satunya ialah menggunakan nyahpantun, mulakan pemasa dalam acara Touchstart, kira kaedah operasi pengguna berdasarkan pemasa, dan batalkan pemasa. Yang lain ialah menggunakan Tatal Maya, yang meningkatkan prestasi dengan hanya memaparkan item senarai yang boleh dilihat pada masa ini. Semoga artikel ini dapat membantu pembaca yang menghadapi masalah sebegini.

Atas ialah kandungan terperinci Vue menyedari bahawa senarai itu tidak meluncur dengan lancar selepas ditekan lama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!