uniapp キーボードが縮小するときにアニメーション効果がない場合はどうすればよいですか?-uni-app-php.cn

uniapp キーボードが縮小するときにアニメーション効果がない場合はどうすればよいですか?

PHPz

リリース： 2023-04-18 15:43:59

オリジナル

865 人が閲覧しました

モバイルデバイスの人気とモバイルアプリケーション市場の成長に伴い、開発者はクロスプラットフォームフレームワークを使用してアプリケーションを開発する方法をますます学習しています。Uniapp は人気のあるクロスプラットフォーム開発フレームワークです。 Uniapp は Vue.js に基づいて開発されており、開発者が開発とデバッグを容易にする一連のプラグインとコンポーネントを提供します。

しかし、Uniapp アプリケーションを開発するときに、一部の開発者は問題を発見しました。入力ボックスにフォーカスが設定されてキーボードがポップアップした後、特に Android デバイスでキーボードが縮小してもアニメーション効果がありません。この問題はユーザーエクスペリエンスに影響を与える可能性があるため、いくつかの解決策を紹介します。

1. vue-router が公式に提供しているトランジションを利用する

vue-router は、Vue.js が公式に提供しているルーティング管理ツールで、ルーティングの遷移効果を実現するためのトランジションを提供します。 Uniapp では、vue-router のトランジションを使用して、キーボードが縮小するときのアニメーション効果を実現できます。

具体的な実装方法は次のとおりです。

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>

ログイン後にコピー

アニメーション効果が必要な場所たとえば、ポップアップレイヤーで、コンポーネントの 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;
}

ログイン後にコピー

上記のコードでは、

fade-enter-active: 入力時のアニメーション効果を示します。
fade-leave-active: 退出時のアニメーション効果を示します。
#fade-enter: 初期状態に入るとき
fade-leave-to: 抜けるときの最終状態

この方法の利点は次のとおりです。使い方は簡単で、アニメーション効果をカスタマイズできますが、ページアニメーションを有効にするために遷移コードを複数回記述する必要があり、コードの冗長性が発生する可能性があります。

2. システム API の呼び出し

uni-app が提供する API を使用して、システムキーボードのリスニングイベントを呼び出し、キーボードがポップアップしたり縮小したりするときのアニメーション効果を実現できます。

実装方法は次のとおりです。

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

ログイン後にコピー

上記のコードでは、

uni.onKeyboardHeightChange メソッドにより、キーボードの高さがいつ変更されるかを監視し、コールバック関数をトリガーできます。キーボードの高さが0より大きい場合はキーボードが飛び出すと判断し、対応するDOM要素にアニメーション用のスタイルを追加します、キーボードの高さが0の場合はキーボードが引っ込んだと判断しますとなり、DOM 要素のアニメーション効果がキャンセルされます。

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

ログイン後にコピー

上記のコードでは、

変換:translate3d(): 要素の位置の変更を示します
isShowKey: キーボードがポップアップするかどうかを示します。true の場合、ポップアップすることを意味します
keyHeight-68 'px ': キーボードの高さから画面下の操作バーの高さを引いた値を元の基準で上方向に変換します
0: 初期状態の要素の位置を示します

この方法の利点は、使用が簡単で、サードパーティのプラグインを使用する必要がないことです。ただし、キーボードを格納したときのアニメーション効果は十分に滑らかではない可能性があります。

3. サードパーティのプラグインを使用する

uview-ui の uni-transition コンポーネントなど、いくつかのサードパーティのプラグインを使用してアニメーション効果を実現することもできます。。

実装方法は次のとおりです。

アニメーション効果を実現する必要があるページに、次のコードを追加します。

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

ログイン後にコピー

上記のコードでは、

uni-transition コンポーネントをラップできます。アニメーション効果を追加する必要があるページコンポーネント。:name 属性を通じてアニメーションタイプを指定します。 v-show ディレクティブは、必要に応じてコンポーネントを表示することを意味します。

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

ログイン後にコピー

上記のコード内:

fade-enter-active : 入力時のアニメーション効果を示します
fade-leave-active: 離脱時のアニメーション効果を示します
fade-enter:初期状態に入るとき
fade-leave-to: 終了するときの最終状態

この方法の利点は、使いやすく、カスタマイズできることです。ただし、サードパーティのプラグインを導入する必要があるため、プロジェクトのサイズが大きくなる可能性があります。

まとめると、上記は Uniapp キーボードが縮小したときにアニメーション効果がなくなる問題を解決する 3 つの方法であり、開発者はプロジェクトのニーズに応じて適切な方法を選択できます。 vue-router のトランジションを使用するか、アニメーション効果を実現するためにシステム API を呼び出すか、サードパーティのプラグインを使用するかにかかわらず、重要なのは、ユーザーエクスペリエンスを向上させ、アプリケーションの品質を向上させるために、特定の状況に基づいてソリューションを定式化することです。

以上がuniapp キーボードが縮小するときにアニメーション効果がない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。