The input method is not included at the bottom of uniapp

With the popularity of mobile Internet, more and more applications are beginning to appear. How to make applications easier to use and faster is also one of the problems that developers need to solve. In many applications, the navigation bar at the bottom is an essential component that helps users quickly switch between pages. However, when using the input method on a mobile device, the navigation bar will be obscured as the input method rises, which not only makes the user experience uncomfortable, but also causes certain usage problems.

In order to solve this problem, many developers use the bottom input method component of the uniapp framework. The function of this component is to allow the navigation bar at the bottom of the page to be fixed at the bottom of the page and not be blocked as the input method rises. In this article, we will explore how to use the bottom input method component in uniapp.

1. Install the uni-ui component library

uni-ui is a component library based on the uniapp framework. It includes many commonly used components, such as input methods, buttons, forms, Navigation, lists, etc. Use uni-ui to quickly build a high-quality uniapp application. First, we need to install the uni-ui component library in the uniapp project. In the root directory of the uni-app project, run the following command:

npm install uni-ui -S

This command will automatically download and install the uni-ui component library to the project directory.

2. Use the bottom input method component

After installing the uni-ui component library, we can use the bottom input method component on the page. Add the following code in the template tag of the page:

<template>
  <view>
    <!-- 页面内容区域 -->
  </view>
  <uni-tab-bar not-safe-area fixed>
    <uni-tab-bar-item
      title="首页"
      icon="uni-icons-home"
      url="/pages/home/home"
    ></uni-tab-bar-item>
    <uni-tab-bar-item
      title="消息"
      icon="uni-icons-comment"
      url="/pages/message/message"
    ></uni-tab-bar-item>
    <uni-tab-bar-item
      title="我的"
      icon="uni-icons-person"
      url="/pages/user/user"
    ></uni-tab-bar-item>
  </uni-tab-bar>
</template>

In this page, we use a uni-tab-bar component to achieve the effect of not following the input method at the bottom. The uni-tab-bar component contains multiple uni-tab-bar-item components, each uni-tab-bar-item component represents a bottom navigation bar button. When using the uni-tab-bar component, we need to add the not-safe-area and fixed attributes to it to achieve the effect of not following the input method at the bottom.

In the uni-tab-bar-item component, we can set the title, icon and url attributes to represent the text, icon and jump link of the button. In this example, we set up three buttons to jump to the homepage, messages and my pages respectively.

3. To achieve the effect of not following the input method component at the bottom

After adding the uni-tab-bar component to the page, we also need to set some attributes in the style to achieve the effect of not following the input method component at the bottom. Effect. Add the following code to the style tag of the page:

<style>
  /* 页面内容区域 */
  view {
    height: 100%;
    padding-bottom: 144rpx; /* 底部导航栏高度 */
    box-sizing: border-box;
  }
  /* 底部导航栏 */
  uni-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ebedf0;
  }
</style>

In this style, we add the padding-bottom attribute to the content area of ​​the page to leave the height of the bottom navigation bar. At the same time, we also set the properties of the uni-tab-bar component to fix it at the bottom of the page. Doing this keeps the bottom navigation bar from being obscured and maintains its position at the bottom of the page.

4. Summary

When using the uniapp framework to develop applications, the bottom input method component is a very practical component. It can help us solve the problem of the bottom navigation bar being blocked by the input method, making the user experience more comfortable. In this article, we introduce how to use the bottom input method component in uniapp and realize the effect of this component. Hope this article is helpful to you.

The above is the detailed content of The input method is not included at the bottom of uniapp. For more information, please follow other related articles on the PHP Chinese website!