数日前、uni-app を使用して開発しているときに nvue 入力がページにポップアップするという問題がありました。

先日、uni-appを使って開発している際にnvueの入力でページがポップアップしてしまう問題があったので、今日はこの問題を解決した方法を紹介します。

開発プロセスでは、入力ボックスの下部がページのコンテンツをブロックする状況によく遭遇しますが、これはユーザーエクスペリエンスにとって非常に不親切です。幸いなことに、入力ボックスがポップアップしたときにページを自動的にポップアップするソリューションを見つけました。これにより、ユーザーは入力ボックスの下のコンテンツを簡単に表示できるようになります。

まずはuni-appにおけるnvueのレイアウト構造を見てみましょう。nvue ページでは、通常<template>、タグと Vue の構文を組み合わせてページ構造を構築します。入力ボックスがページを持ち上げる問題を解決するには、2 つの重要な点に注意する必要があります。1 つ目は、入力ボックスが配置されている親要素であり、2 つ目は、入力ボックスがフォーカスを取得したかどうかのイベントを監視することです。

まず、入力ボックスが配置される親要素を設定する必要があります<scroll-view>。このラベルはスクロールを実現し、レイアウト構造を自動的に調整します。サンプルコードは次のとおりです。

<template>
  <view>
    <scroll-view class="container">
      <!-- 在这里放置其他需要滚动的内容 -->
      <view class="content">
          <!-- 这里放置其他内容 -->
          <input class="inputBox" type="text" @focus="onInputFocus" />
      </view>
    </scroll-view>
  </view>
</template>

.content上記のコードでは、入力ボックスをタグ内に配置し<view>、その親要素をに設定しました<scroll-view>。このようにして、入力ボックスをクリックしてフォーカスを取得すると、<scroll-view>入力ボックスが表示され、他のコンテンツが上にスクロールされるようにレイアウトが自動的に調整されます。

<script>次に、対応するイベントハンドラー関数をページタグに追加する必要があります。入力ボックスがフォーカスを取得したら、ページスクロールアニメーションをリッスンしてトリガーする必要があります。サンプルコードは次のとおりです。

<script>
  export default {
    methods: {
      onInputFocus() {
        uni.pageScrollTo({
          scrollTop: 300, // 设置滚动的距离
          duration: 300, // 设置滚动动画的时长
          selector: '.container', // 设置滚动的容器，这里使用了父元素的类选择器
        });
      },
    },
  };
</script>

上記のコードでは、ユニアプリ API を使用してuni.pageScrollToページのスクロール効果を実現しています。属性を設定することでscrollTopスクロール距離を指定できる属性durationでスクロールアニメーションの継続時間を設定できる属性でスクロールselectorコンテナを指定できる親要素のクラスセレクターを使用する.container

最後に、ページと入力ボックスを美しくするためにいくつかのスタイルを追加できます。サンプルコードは次のとおりです。

<style>
  .container {
    height: 100vh; // 设置滚动容器的高度为屏幕的高度
    overflow-y: scroll; // 设置滚动容器为垂直滚动
  }

  .content {
    padding: 20px;
  }

  .inputBox {
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 16px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
  }
</style>

上記のコードにより、ユーザーが入力ボックスをクリックしてフォーカスを取得すると、ページが自動的にスクロールし、入力ボックスが上に押し上げられ、ユーザーが入力ボックスの下のコンテンツを確実に確認できるようになります。

私の共有がユニアプリ開発の皆さんに役立つことを願っています。ありがとう！

数日前、uni-app を使用して開発しているときに nvue 入力がページにポップアップするという問題がありました。

おすすめ