A few days ago, there was a problem with nvue input popping up the page when developing using uni-app.

A few days ago, there was a problem with nvue input popping up the page when developing using uni-app. Today I will share with you how I solved this problem.

During the development process, we often encounter situations where the bottom of the input box blocks the page content. This problem is very unfriendly to the user experience. Fortunately, I found a solution that automatically pops up the page when the input box pops up, allowing users to easily view the content below the input box.

First, let's take a look at the layout structure of nvue in uni-app. In nvue pages, we usually use <template>tags combined with Vue's syntax to build the page structure. To solve the problem of the input box lifting up the page, we need to pay attention to two key points: first, the parent element where the input box is located, and second, monitoring the event of whether the input box gets focus.

First, we need to set the parent element where the input box is located <scroll-view>. This label can realize scrolling and automatically adjust the layout structure. The sample code is as follows:

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

In the above code, we placed the input box in a .contenttag <view>and set its parent element to <scroll-view>. In this way, when the input box is clicked to gain focus, <scroll-view>the layout will be automatically adjusted to make the input box visible and other content scrolled up.

<script>Next, we need to add the corresponding event handler function to the page tag. When the input box gets focus, we need to listen and trigger the page scroll animation. The sample code is as follows:

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

In the above code, we use the uni-app API uni.pageScrollToto achieve the scrolling effect of the page. scrollTopThe scrolling distance can be specified by setting the attribute. durationThe attribute can set the duration of the scroll animation. selectorThe attribute specifies the scrolling container. We use the class selector of the parent element .container.

Finally, we can add some styles to beautify the page and input boxes. The sample code is as follows:

<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>

Through the above code, when the user clicks on the input box to gain focus, the page will automatically scroll, pushing the input box up, and ensuring that the user can see the content below the input box.

I hope my sharing will be helpful to everyone in uni-app development. Thanks!