uniapp h5 キーボードを非表示にした後、ページの下部に空白スペースが表示される問題を解決する方法

H5 の Web ページを開発していると、キーボードがポップアップした後にページの下部に空白が表示されるという状況によく遭遇しますが、これは uniapp でもよく発生する問題です。この記事では、uniapp H5キーボードが非表示になった後、ページの下部が空白になる問題を解決する方法を紹介します。

1. 問題分析

モバイル デバイスでは、キーボードがポップアップすると、元々下にあった要素が上に押し上げられます。この時点でページ上で何も処理が実行されていない場合、空白の領域はユーザーに不快感を与えます。 uniapp は H5 プログラムとミニ プログラムの両方をサポートしているため、異なるプラットフォームに合わせて処理する必要があるため、この問題は uniapp でも発生します。

2. 解決策

プラットフォームが異なると、さまざまな方法でこの問題を解決する必要があります。

1. H5 プラットフォーム

H5 プラットフォームでは、ソリューションは比較的単純です。必要なのは、キーボードのポップアップ イベントとリトラクト イベントを監視することだけです。上に移動すると、下に表示されます。要素を上に移動するだけです。例:

// 获取元素和屏幕高度
const input = document.querySelector("input");
const screenHeight = window.innerHeight;
 
// 监听键盘弹出事件
input.addEventListener("focus", () => {
  // 上移元素
  input.style.transform = `translateY(-${screenHeight / 2}px)`;
});
 
// 监听键盘收起事件
input.addEventListener("blur", () => {
  // 恢复元素位置
  input.style.transform = "translateY(0px)";
});

2. ミニ プログラム プラットフォーム

ミニ プログラム プラットフォームでは、wx.pageScrollTo() メソッドを使用してページ スクロールを実装する必要があります。例:

// 获取元素和屏幕高度
const input = document.querySelector("input");
const screenHeight = wx.getSystemInfoSync().windowHeight;
 
// 监听键盘弹出事件
wx.onKeyboardHeightChange((res) => {
  // 计算元素需要上移的高度
  const scrollTop = res.height - screenHeight / 2;
  // 滚动页面
  wx.pageScrollTo({ scrollTop });
});

3. 概要

上記の方法により、uniapp H5 キーボードを非表示にした後のページ下部の空白の問題を簡単に解決できます。ただし、実際のプロジェクトでは、より良いユーザー エクスペリエンスを実現するために、特定の状況に基づいてコードに調整や最適化を行う必要がある場合があることに注意してください。

以上がuniapp h5 キーボードを非表示にした後、ページの下部に空白スペースが表示される問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。