Bagaimana untuk melumpuhkan halaman iOS melantun dalam UniApp

UniApp ialah rangka kerja pembangunan merentas platform yang membolehkan pembangun membangunkan aplikasi pada berbilang platform menggunakan satu bahasa (Vue.js). Ini termasuk platform iOS, tetapi semasa proses pembangunan, masalah biasa ialah halaman iOS melantun.

Lantunan Halaman merujuk kepada fenomena halaman melantun ke atas dan ke bawah. Apabila panjang halaman melebihi tetingkap paparan, kesan melantun akan berlaku, yang mungkin menjejaskan pengalaman pengguna. Pada IOS, Lantunan Halaman didayakan secara lalai untuk WebView, yang juga menyebabkan kesan lantunan yang tidak dijangka berlaku kadangkala apabila membangunkan aplikasi UniApp. Artikel ini akan memperkenalkan cara melumpuhkan halaman iOS melantun dalam UniApp.

IOS Lantun dalam UniApp

Dalam UniApp, kami boleh mengawal gaya keseluruhan halaman melalui gaya CSS. Semasa proses pembangunan, kami akan menggunakan gaya CSS berikut:

body {
  overflow: hidden;
  /* 禁止页面滚动 */
}

.container {
  height: 100vh;
  overflow-y: auto;
  /* 设置滚动区域 */
}

Dalam iOS, anda juga perlu menetapkan WebView untuk mengelakkan Page Bounce.

/* 禁止页面滚动 */
-webkit-overflow-scrolling: touch;

Apabila aplikasi UniApp anda berjalan dalam peranti iOS, jika anda tidak menggunakan -webkit-overflow-scrolling: touch; untuk menetapkan WebView, pengguna akan melihat apabila halaman melantun The complete Webview halaman diregangkan dan dibengkokkan.

Walau bagaimanapun, walaupun anda menggunakan -webkit-overflow-scrolling:touch;, anda masih akan menemui halaman yang melantun dalam peranti iOS. Salah satu sebabnya ialah apabila halaman melimpah, regangan dan lenturan masih berlaku.

Dalam contoh di bawah, saya akan menunjukkan kepada anda cara untuk melumpuhkan kesan lantunan halaman IOS dalam UniApp.

body {
  overflow: hidden;
}

.container {
  height: 100vh;
  overflow-y: scroll;
  /* 使用滚动区域代替Webview滚动 */
  -webkit-overflow-scrolling: touch;
  /* IOS弹性 */
  position: relative;
  /* 相对位置 */
  overflow-x: hidden;
  /* X轴滚动 */
  -webkit-transform: translateZ(0);
  /* 3D加速 */
  -webkit-overflow-scrolling: touch;
}

Cara melaksanakan kesan melumpuhkan lantunan halaman IOS

Dalam kod di atas, kami mula-mula menetapkan limpahan badan kepada tersembunyi untuk melumpuhkan penatalan halaman. Kemudian, kami menggunakan kelas .container untuk menggantikan kawasan tatal Webview dan menggunakan sifat tatal, yang memampatkan kawasan tatal kepada saiz biasa dan kawasan tatal tidak akan meregang dan bengkok apabila halaman melimpah.

Kami juga boleh menggunakan beberapa sifat lain untuk melumpuhkan sepenuhnya halaman iOS melantun. Sebagai contoh, menetapkan kedudukan bekas kepada relatif, tatal paksi X kepada tersembunyi dan -webkit-transform kepada translateZ(0) untuk pecutan 3D akan menghalang fenomena lantunan daripada berlaku sepenuhnya.

Kesimpulan

Artikel ini memperkenalkan cara untuk melumpuhkan kesan melantun halaman iOS dalam UniApp. Memandangkan pembangun terus meningkatkan penggunaan UniApp mereka, cara menyelesaikan masalah melantun halaman iOS akan menjadi masalah biasa. Walau bagaimanapun, kaedah yang disediakan dalam artikel ini boleh membantu pembangun menyelesaikan masalah ini dengan mudah dan menjadikan aplikasi UniApp lebih lancar dan semula jadi pada peranti iOS.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan halaman iOS melantun dalam UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!