uniapp uses webview without occupying full screen

In recent years, with the popularity of mobile Internet, more and more enterprises and developers have begun to focus on the development of mobile applications. In cross-platform development, Uni-app has attracted much attention as an excellent solution. In actual development, some developers encountered the problem of full-screen display of the webview in Uni-app, resulting in an unsightly interface. This article will introduce how to use webview in Uni-app to prevent the application from taking up the entire screen.

1. Problem Analysis

When using webview for page nesting in Uni-app, many developers generally think of directly writing the height of the webview as 100%. However, this will inevitably lead to the page taking up the entire screen and lacking beauty. In order to solve this problem, we can nest a container in the page and add a webview in the container.

2. Code implementation

1. Add a container to the page

<view class="container">
  <web-view :src="url"></web-view>
</view>

2. Define the style of the container

By setting the style of the container, the webview can occupy the required size within the container.

.container {
  height : 600rpx;  // 自定义高度
  width : 100%;
  margin-top : 50rpx;
} 

3. Define the style of webview

We need to set the height of webview to 100%. At this time, the webview will occupy the entire space of the container. But we don't need this. To center the webview in the container, we can use flex layout and specify both horizontal and vertical centering.

web-view {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

Through the above code, we can use webview in Uni-app to achieve the effect of not occupying the full screen.

3. Notes

1. As long as the container determines the height, the height of the webview is 100%;
2. If you want to set the width of the webview, you can only use flex layout Or specify a specific width;
3. Pages in webview cannot use position:fixed;

4. Summary

In mobile applications, webview is One of the very important components. How to prevent the webview from occupying the full screen in the application? This article introduces a simple implementation: controlling the size of webview by setting the style of the container. I believe that readers can successfully achieve this effect in their own Uni-app projects through the introduction of this article.

The above is the detailed content of uniapp uses webview without occupying full screen. For more information, please follow other related articles on the PHP Chinese website!