Uniapp membuang bayang-bayang

Uniapp ialah rangka kerja pembangunan merentas platform yang sangat baik yang menyokong penulisan sekali dan berjalan pada berbilang terminal. Sebagai pembangun, anda mungkin menghadapi beberapa masalah semasa pembangunan menggunakan Uniapp, seperti cara mengalih keluar kesan bayang-bayang pada halaman. Dalam artikel ini, saya akan berkongsi kaedah untuk membuang bayang-bayang dalam Uniapp, saya harap ia akan membantu semua orang.

Pertama sekali, kita perlu memahami kesan penukaran halaman Uniapp. Uniapp menggunakan kesan animasi penukaran halaman secara lalai, iaitu, meluncur masuk dari sebelah kanan, dan terdapat kesan bayang-bayang fade-in dan fade-out. Kesan bayang-bayang ini memberi orang rasa tiga dimensi perubahan halaman, tetapi dalam sesetengah senario, kesan ini mungkin tidak diperlukan, seperti dalam beberapa reka bentuk halaman mudah.

Seterusnya, saya akan perkenalkan cara untuk membuang kesan bayangan ini.

Kaedah 1: Ubah suai gaya global

Kita boleh mengalih keluar kesan bayangan ini dengan mengubah suai gaya global. Kaedah pelaksanaan khusus adalah seperti berikut:

1. Buka projek Uniapp dan cari fail "App.vue" dalam direktori akar.
2. Cari kod berikut:

<uni-transition fade class="app-plus-transition">
  <router-view class="app-plus">
  </router-view>
</uni-transition>

Antaranya, teg <uni-transition> mewakili kesan penukaran halaman, fade mewakili kesan fade-in dan fade-out, dan teg <router-view> mewakili komponen halaman.

3. Tambah atribut <uni-transition> dalam teg effect dan tetapkannya kepada slide-left seperti berikut:

<uni-transition effect="slide-right" class="app-plus-transition">
  <router-view class="app-plus">
  </router-view>
</uni-transition>

di mana, atribut effect Menunjukkan kesan penukaran halaman, dan slide-right menunjukkan gelongsor masuk dari kiri.

4. Tambah atribut <router-view> dalam teg style dan tetapkannya kepada background-color: #FFFFFF seperti berikut:

<uni-transition effect="slide-right" class="app-plus-transition">
  <router-view class="app-plus" style="background-color: #FFFFFF">
  </router-view>
</uni-transition>

5. Simpan perubahan dan Jalankan semula projek dan anda akan melihat halaman dengan kesan bayang-bayang dikeluarkan.

Perlu diingat bahawa kaedah ini boleh mengalih keluar kesan bayang-bayang kesan penukaran halaman, tetapi ia juga akan mengalih keluar kesan bayang-bayang komponen halaman. Jika komponen halaman memerlukan kesan bayangan, ia boleh dilaraskan melalui gaya CSS.

Kaedah 2: Ubah suai gaya komponen

Kami juga boleh mengalih keluar kesan bayangan kesan penukaran halaman dengan mengubah suai gaya komponen Kaedah pelaksanaan khusus adalah seperti berikut:

1. Cari Komponen yang perlu mengalih keluar kesan bayang.
2. Tambah kod berikut dalam gaya komponen:

.uni-transition-fade-enter-active, .uni-transition-fade-leave-active, .uni-transition-fade-enter-to, .uni-transition-fade-leave-to {
  background-color: transparent !important;
}

Antaranya, .uni-transition-fade-enter-active, .uni-transition-fade-leave-active, .uni-transition-fade-enter-to dan .uni-transition-fade-leave-to mewakili kelas CSS untuk penukaran halaman.

3. Simpan perubahan dan jalankan semula projek, dan anda akan melihat komponen halaman dengan kesan bayang-bayang dialih keluar.

Perlu diingat bahawa kaedah ini hanya boleh mengalih keluar kesan bayang-bayang satu komponen Jika anda perlu mengalih keluar kesan bayang-bayang berbilang komponen, setiap komponen perlu diubah suai dengan sewajarnya.

Ringkasan

Uniapp ialah rangka kerja pembangunan merentas platform yang sangat baik yang boleh membantu pembangun membina aplikasi merentas hujung dengan cepat. Artikel ini memperkenalkan dua kaedah untuk mengalih keluar kesan bayang-bayang halaman Uniapp, satu daripadanya ialah dengan mengubah suai gaya global dan satu lagi adalah dengan mengubah suai gaya komponen. Saya harap kaedah ini dapat membantu semua orang menyelesaikan masalah dalam pembangunan Uniapp.

Atas ialah kandungan terperinci Uniapp membuang bayang-bayang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!