Rumah > Artikel > hujung hadapan web > 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:
<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>
.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:
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.
<input class="input" type="text" style="transform: translate3d(0, {{isShowKey ? -(keyHeight - 68)+'px' : '0'}}, 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:
<uni-transition :name="'fade'"> <div v-show="showContent" class="content"> //... </div> </uni-transition>
Dalam kod di atas, komponen uni-transition
boleh membalut komponen yang perlu animasi, melalui :name
Atribut untuk menentukan jenis animasi. Arahan v-show
bermaksud untuk memaparkan komponen apabila diperlukan.
.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!