Apakah yang perlu saya lakukan jika tiada kesan animasi apabila papan kekunci uniapp mengecut?

Dengan populariti peranti mudah alih dan pertumbuhan pasaran aplikasi mudah alih, pembangun semakin belajar menggunakan rangka kerja merentas platform untuk membangunkan aplikasi Uniapp ialah rangka kerja pembangunan merentas platform yang popular. Uniapp dibangunkan berdasarkan Vue.js dan menyediakan satu siri pemalam dan komponen untuk memudahkan pembangun membangun dan nyahpepijat.

Walau bagaimanapun, semasa membangunkan aplikasi Uniapp, sesetengah pembangun menemui masalah: selepas kotak input mendapat fokus dan papan kekunci muncul, tiada kesan animasi apabila papan kekunci mengecut, terutamanya pada peranti Android. Masalah ini boleh menjejaskan pengalaman pengguna Berikut adalah beberapa penyelesaian.

1. Gunakan peralihan yang disediakan secara rasmi oleh vue-router

vue-router ialah alat pengurusan penghalaan yang disediakan secara rasmi oleh Vue.js, yang menyediakan peralihan untuk mencapai kesan peralihan penghalaan. Dalam Uniapp, kita boleh menggunakan peralihan dalam vue-router untuk mencapai kesan animasi apabila papan kekunci mengecut.

Kaedah pelaksanaan khusus adalah seperti berikut:

1. Tambah kod berikut dalam App.vue:

<template>
  <div id="app">
    <transition name="fade">
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  methods: {},
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

2. Apabila kesan animasi perlu dicapai Tempat, seperti lapisan pop timbul, tambah kod berikut dalam teg gaya komponen:

.slide-up-enter-active, .slide-up-leave-active {
  transition: all .3s cubic-bezier(.55,0,.1,1);
}
.slide-up-enter, .slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

Dalam kod di atas,

• fade-enter-active: menunjukkan kesan Animasi kemasukan apabila
• fade-leave-active: Menunjukkan kesan animasi apabila keluar
• fade-enter: Keadaan awal apabila memasuki
• fade-leave-to: Keadaan akhir apabila meninggalkan

Kelebihan kaedah ini ialah ia mudah digunakan dan boleh menyesuaikan kesan animasi, tetapi ia memerlukan menulis kod peralihan beberapa kali untuk menjadikan animasi halaman berkuat kuasa, yang mungkin menyebabkan redundansi kod.

2. Panggil API sistem

Kami boleh menggunakan API yang disediakan oleh uni-app untuk memanggil acara mendengar papan kekunci sistem untuk mencapai kesan animasi apabila papan kekunci muncul dan mengecut.

Kaedah pelaksanaan adalah seperti berikut:

1. Pada halaman yang perlu mencapai kesan animasi, anda boleh menambah kod berikut dalam kitaran hayat onLoad atau onShow:

onLoad() {
  uni.onKeyboardHeightChange((res) => {
    if(res.height > 0){
      //键盘弹出时
      this.isShowKey = true;
      this.keyHeight = res.height;
    } else {
      //键盘收回时
      this.isShowKey = false;
    }
  });
},

Dalam kod di atas, kaedah uni.onKeyboardHeightChange boleh memantau apabila ketinggian papan kekunci berubah dan mencetuskan fungsi panggil balik. Jika ketinggian papan kekunci lebih daripada 0, ia dinilai bahawa papan kekunci muncul, dan gaya ditambahkan pada elemen DOM yang sepadan untuk animasi jika ketinggian papan kekunci ialah 0, ia dinilai bahawa papan kekunci ditarik balik , dan kesan animasi elemen DOM dibatalkan.

2. Tambahkan kod berikut dalam teg gaya elemen DOM yang sepadan:

<input class="input" type="text" 
style="transform: translate3d(0, {{isShowKey ? -(keyHeight - 68)+&#39;px&#39; : &#39;0&#39;}}, 0);"
/>

Dalam kod di atas,

• transform: translate3d() : Menunjukkan menukar kedudukan elemen
• isShowKey: Menunjukkan sama ada papan kekunci muncul Jika benar, ia bermakna ia muncul
• keyHeight-68+'px': Menunjukkan ketinggian papan kekunci tolak ketinggian bar operasi di bahagian bawah skrin, dan kemudian Terjemah ke atas pada asas asal
• 0: Menunjukkan kedudukan elemen dalam keadaan awalnya

Kelebihan kaedah ini ialah ia mudah digunakan dan tidak memerlukan penggunaan pemalam pihak ketiga, tetapi apabila papan kekunci ditarik balik Kesan animasi mungkin tidak cukup lancar.

3. Gunakan pemalam pihak ketiga

Kami juga boleh menggunakan beberapa pemalam pihak ketiga untuk mencapai kesan animasi, seperti komponen peralihan uni dalam uview-ui, dsb. .

Kaedah pelaksanaan adalah seperti berikut:

1. Muat turun dan rujuk rangka kerja uview-ui.
2. Dalam halaman yang perlu dianimasikan, tambahkan kod berikut:

<uni-transition :name="&#39;fade&#39;">
  <div v-show="showContent" class="content">
    //...
  </div>
</uni-transition>

Dalam kod di atas, komponen uni-transition boleh membalut komponen yang perlu animasi, melalui :nameAtribut untuk menentukan jenis animasi. Arahan v-show bermaksud untuk memaparkan komponen apabila diperlukan.

3. Tambah kod berikut dalam teg gaya:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Dalam kod di atas:

• fade-enter-active: menunjukkan bila memasuki kesan Animasi
• fade-leave-active: Kesan animasi apabila keluar
• fade-enter: Keadaan awal apabila memasuki
• fade-leave-to: Keadaan akhir apabila keluar

Kelebihan kaedah ini ialah ia mudah digunakan dan boleh menyesuaikan kesan animasi, tetapi ia memerlukan pengenalan pemalam pihak ketiga, yang mungkin meningkatkan saiz projek.

Ringkasnya, di atas adalah tiga kaedah untuk menyelesaikan masalah tiada kesan animasi apabila papan kekunci Uniapp mengecut. Sama ada anda menggunakan peralihan vue-router, memanggil API sistem untuk mencapai kesan animasi, atau menggunakan pemalam pihak ketiga, kuncinya adalah untuk merumuskan penyelesaian berdasarkan situasi tertentu untuk meningkatkan pengalaman pengguna dan meningkatkan kualiti aplikasi.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika tiada kesan animasi apabila papan kekunci uniapp mengecut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!