uniapp melarang pandangan gelongsor manual

Kata Pengantar

Uniapp ialah rangka kerja pembangunan merentas hujung yang membolehkan anda menggunakan sintaks Vue untuk membangunkan program kecil, H5 dan APP, membolehkan pembangun membangunkan aplikasi merentas platform dengan lebih cekap. Tetapi apabila menggunakan uniapp untuk membangunkan program kecil, anda mungkin menghadapi beberapa masalah. Artikel ini memperkenalkan cara untuk melumpuhkan paparan gelongsor manual dalam program mini.

Penerangan Masalah

Apabila membangunkan atur cara kecil dalam uniapp, kadangkala perlu untuk melaksanakan kesan gelongsor dalam paparan. Untuk mencapai kesan ini, kami biasanya menggunakan scrollview dan meletakkannya dalam paparan. Tetapi kadangkala kami tidak mahu pengguna meluncurkan paparan ini secara manual, kerana gelongsor manual boleh menjejaskan reka letak keseluruhan halaman. Jadi bagaimana untuk membuat paparan ini tidak dapat meluncur secara manual?

Penyelesaian

Dalam uniapp, kita boleh mencapai kesan ini dengan menetapkan atribut scroll-y dan atribut catchtouchmove bagi komponen scroll-view. Antaranya, apabila atribut tatal-y adalah benar, ini bermakna gelongsor menegak boleh dilakukan, dan apabila atribut catchtouchmove adalah benar, ia bermakna peristiwa sentuhan dihalang daripada menggelegak.

Operasi khusus adalah seperti berikut:

1 Tambahkan komponen paparan tatal dalam paparan, dan tetapkan atribut tatal-y dan catchtouchmove kepada benar.

<view>
<scroll-view scroll-y="true" catchtouchmove="true">
</scroll-view>
</view>

2 Dalam CSS global program mini, tambahkan kod berikut untuk mengelakkan komponen paparan daripada gelongsor.

html,body{
  height:100%;
  overflow:hidden;
}

Memandangkan kami meletakkan komponen paparan tatal dalam paparan, kami hanya perlu melarang komponen paparan daripada meluncur untuk mencapai kesan "lumpuhkan gelongsor". Kami menetapkan ketinggian html dan badan kepada 100% dan limpahan kepada tersembunyi dalam CSS global Dengan cara ini, kami melarang gelongsor keseluruhan halaman dan komponen paparan tidak boleh slaid.

Walau bagaimanapun, mungkin terdapat masalah dengan pendekatan ini. Apabila anda ingin menggunakan operasi gelongsor dalam halaman, kami mesti menetapkan atribut limpahan html dan komponen badan kepada auto semula. Tetapi pendekatan ini boleh menjejaskan gaya komponen lain. Untuk mengelakkan perkara ini berlaku, kita perlu meminimumkan kesan ke atas komponen lain apabila melaksanakan "tiada gelongsor".

Ringkasnya, langkah-langkah untuk melumpuhkan paparan gelongsor manual dalam uniapp adalah seperti berikut:

1. Tambahkan komponen paparan tatal pada paparan dan tetapkan atribut tatal-y dan catchtouchmove kepada benar.

2. Tambahkan kod berikut dalam CSS global program mini:

html,body{
  height:100%;
  overflow:hidden;
}

Dengan cara ini, kita boleh mencapai kesan melarang gelongsor pandangan secara manual sambil mempunyai kesan yang kurang pada gaya komponen lain.

Ringkasan

Rangka kerja uniapp menyediakan pembangun dengan banyak fungsi dan API yang mudah, tetapi kadangkala kita mungkin perlu membuat beberapa tetapan dan pelarasan apabila melaksanakan fungsi tertentu. Artikel ini memperkenalkan cara untuk melumpuhkan paparan gelongsor manual dalam program mini, menggunakan sifat paparan tatal dan tetapan CSS global. Semoga artikel ini dapat memberi manfaat kepada semua.

Atas ialah kandungan terperinci uniapp melarang pandangan gelongsor manual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!