ホームページ > 記事 > ウェブフロントエンド > uniappでページプッシュを無効にする方法
モバイルインターネットの発展に伴い、モバイル端末の利用がますます広がり、モバイル端末の利用に関するさまざまな問題も生じています。モバイルデバイスを使用しているとき、入力や検索など、キーボードを開く必要がある場合があります。ただし、iOS と Android システムの違いにより、iOS システムではキーボードを開くとページ全体が押し上げられますが、Android システムではキーボードが押し上げられないなど、キーボードを開くときに問題が発生する場合があります。この記事では、uniappでページプッシュを無効にする方法を紹介します。
iOS では、キーボードを開くとページ全体が押し上げられ、ユーザーが入力内容を確認できるようになります。ただし、入力ボックスの数が多い場合、ページ上で押し上げられた高さが他の要素に影響を及ぼし、レイアウトが混乱する可能性があります。 Android システムでは、キーボードが入力ボックスを覆いますが、ページ全体が押し上げられることはありません。したがって、ユニアプリ開発では、キーボードを開くことによってページが押し上げられないように、この問題を解決する方法を見つける必要があります。
uniappでは、キーボードの開閉イベントを監視し、ページの高さを調整してページの押し上げを禁止する効果を実現できます。
uniapp では、uni.onKeyboardShow
と uni.onKeyboardHide## の 2 つのメソッドを通じてキーボードをリッスンできます。 # イベントを開いたり閉じたりします。これら 2 つの方法を使用すると、キーボードの高さやイベントがトリガーされた時刻などの情報を取得できます。ここでは、
uni.createSelectorQuery() メソッドを使用してページ要素のサイズ情報を取得し、キーボードの開閉時にページを操作する必要があります。
export default { data() { return { // 页面高度 pageHeight: '', // 输入框距离页面底部的距离 marginTop: '', // 页面是否被上推 isPushed: false } }, mounted() { this.getPageHeight() }, methods: { // 获取页面高度和输入框的位置信息 getPageHeight() { uni.createSelectorQuery().select('.input-box').boundingClientRect((rect) => { // 记录输入框距离页面底部的距离 this.marginTop = this.pageHeight - rect.bottom }).exec() uni.createSelectorQuery().select('.page').boundingClientRect((rect) => { // 记录页面高度 this.pageHeight = rect.height }).exec() }, // 监听键盘打开事件 onKeyboardShow(e) { // 获取键盘高度 let keyboardHeight = e.height // 页面上推 this.pushPage(keyboardHeight) }, // 监听键盘关闭事件 onKeyboardHide() { // 页面还原 this.restorePage() }, // 页面上推 pushPage(keyboardHeight) { if (!this.isPushed) { this.isPushed = true // 计算上推的高度 let pushHeight = keyboardHeight - this.marginTop if (pushHeight > 0) { uni.pageScrollTo({ scrollTop: pushHeight, duration: 100 }) } } }, // 页面还原 restorePage() { if (this.isPushed) { uni.pageScrollTo({ scrollTop: 0, duration: 100 }) this.isPushed = false } } } }まず、
mounted()関数でページの高さと入力ボックスの位置情報を取得します。次に、
onKeyboardShow() メソッドでキーボードの高さを取得し、押し上げ距離を計算して、ページの押し上げ操作を実行します。最後に、
onKeyboardHide() メソッドでページの元の状態を復元します。
uni.createSelectorQuery() メソッドを使用して、ページの高さと位置を取得します。入力ボックスの情報。ただし、このメソッドは
mounted() 関数内で実行する必要があるため、ページをロードする前に呼び出した場合、ページ要素の情報が正しく取得されません。したがって、動的計算方法を使用してページ要素に関する情報を取得する必要もあります。
<style> .page { position: relative; width: 100%; height: 100vh; overflow: hidden; } .input-box { position: absolute; bottom: 0; width: 100%; height: auto; padding: 20px 10px; box-sizing: border-box; background-color: #fff; z-index: 1000; } </style>まず、スタイルでページの高さを
100vh に設定します。これにより、デバイスの画面の高さに応じてページの高さが動的に調整されます。次に、入力ボックス コンテナのスタイルに
position:Absolute を設定し、入力ボックスが常にページの下部に配置されるように
bottom: 0 を設定します。こうすることで、キーボードがポップアップしても入力ボックスは影響を受けません。
以上がuniappでページプッシュを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。