Home > WeChat Applet > Mini Program Development > The container component view of WeChat applet realizes horizontal and vertical layout

The container component view of WeChat applet realizes horizontal and vertical layout

高洛峰
Release: 2018-05-17 16:20:16
Original
13032 people have browsed it

In the previous article, we analyzed the file structure directory analysis of the WeChat applet. In this article, we will take a look at the horizontal and vertical layout of the container component view of the applet.
The two most commonly used layout methods in projects, horizontal layout and vertical layout, are relatively simple to implement in WeChat mini programs.
1. Horizontal horizontal layout:

The container component view of WeChat applet realizes horizontal and vertical layout

To implement horizontal layout, four view container components are required, one of which is the parent container. As follows:

<!--index.wxml-->  
<view class="content">  
  <view  style="flex:1;height:100px;background-color:green">box1</view>  
  <view style="flex:1;height:100px;background-color:blue">box2</view>  
  <view style="flex:1;height:100px;background-color:yellow">box3</view>  
</view>
Copy after login

Give the parent container the following style:

/**index.wxss**/  
.content{  
  display: flex;  
  flex-direction: row;  
}
Copy after login

where display: flex sets the view to a flexible layout, flex-direction: row; sets the direction of the layout to a horizontal horizontal layout.
In the three self-container views, set a height, do not set the width, and set flex to 1, which means to score the screen width so that you can get three equal widths. Of course, you can also set its width. For example, I set it as follows:

<view class="content">  
  <view  style="width:50px;height:100px;background-color:green">box1</view>  
  <view style="width:50px;;height:100px;background-color:blue">box2</view>  
  <view style="width:50px;;height:100px;background-color:yellow">box3</view>  
</view>
Copy after login

The effect is that each width occupies 50px, and the same horizontal and horizontal layout is achieved. The effect is as follows:

The container component view of WeChat applet realizes horizontal and vertical layout

#And when I set box1 to a fixed width of 50px, and box2 and box3 do not set the width
but directly set flex:1, the code is as follows:

<!--index.wxml-->  
<view class="content">  
  <view  style="width:50px;height:100px;background-color:green">box1</view>  
  <view style="flex:1;height:100px;background-color:blue">box2</view>  
  <view style="flex:1;height:100px;background-color:yellow">box3</view>  
</view>
Copy after login

The effect will be that after box1 occupies its 50px width, the remaining width of the entire screen will be equally divided between box2 and box3. The effect is as follows:

The container component view of WeChat applet realizes horizontal and vertical layout

2. Vertical layout:

The container component view of WeChat applet realizes horizontal and vertical layout

The vertical layout is similar to the horizontal layout, but it needs to be The layout mode is changed to vertical column. If you need to set the width of each box to flex:1 and other adaptive layouts, you need to give the parent container a height. Otherwise, the height of the child container will only be displayed as a notification that can just wrap the text. . Of course you can also set the height of each box. Here I choose adaptive, so I give the parent container a height of 600px, and let the three boxes inside equally divide its height. The code
is as follows:

/**index.wxss**/  
.content{  
  height: 600px;  
  display: flex;  
  flex-direction: column;  
}
Copy after login
<!--index.wxml-->  
<view class="content">  
  <view style="flex:1;width:100%;background-color:green">box1</view>  
  <view style="flex:1;width:100%;background-color:blue">box2</view>  
  <view style="flex:1;width:100%;background-color:yellow">box3</view>  
</view>
Copy after login

The effect is as follows:

The container component view of WeChat applet realizes horizontal and vertical layout

We can use the methods described above to achieve more flexible layouts.

For more articles related to the container component view of WeChat applet to achieve horizontal and vertical layout, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template