Table of contents:
How to carry out page layout and design when developing applications in uni-app
design method
In uni-app, you can use the syntax of Vue.js for page layout and design. Here are some basic layout and design methods:
-
Using flex layout: This can be achieved by setting the display:flex attribute, which can implement simple adaptive layout.
-
Using grid layout: This can be achieved by setting the display:grid attribute to achieve more complex adaptive layout.
-
Use CSS styles: You can use various properties of CSS, such as position, float, margin, padding, etc., for page layout and design.
-
Use component library: You can use the component library that comes with uni-app or other third-party component libraries, such as vant, element-ui, etc. for page design.
It should be noted that when developing uni-app, you need to consider the compatibility of different platforms, and you need to note that the style and layout may be different on different platforms.
Quick start using flex layout
Flex layout is a powerful CSS layout method that is used to make the website adaptive on various devices and quickly build responsive websites.
For example, here is a basic code using Flex layout:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
order: 1;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
Commonly used flex layout properties are:
- display:flex; // Define a flex container
- flex-direction: row/column/row-reverse/column-reverse; // Define the main axis direction
- flex-wrap:nowrap/wrap/wrap-reverse; // Define whether to wrap or not
- justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly; // Define main axis alignment
- align-items:flex-start/flex-end/center/baseline/stretch; // Define cross-axis alignment
- align-content:flex-start/flex-end/center/space-between/space-around/stretch; // Define the alignment of multiple rows in the cross-axis direction
Quick guide to using grid layout
Grid layout is a new two-dimensional layout method added to CSS3, which can be used in complex page layout scenarios. Here are the quick-start steps for Grid layout:
- Define the grid container on the parent element and
display:griddefine it through styles. For example:
.container {
display: grid;
}
- Next, you need to define grid rows and grid columns. It can be defined separately using two attributes
grid-template-rows.grid-template-columnsFor example:
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}
The above code defines 2 grid rows and 2 grid columns, the first row has a height of 100 pixels, the second row has a height of 200 pixels, the first column has a width of 1/3, and the second column has a width of 2/3.
- The position of the grid element in the grid can then be defined by
grid-rowand .grid-columnFor example:
.item-1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.item-2 {
grid-row: 1 / 3;
grid-column: 2 / 3;
}
In the above code, .item-1the element is located in the first row and first column, and .item-2the element occupies the first and second columns.
grid-gapFinally, the spacing between grid rows and grid columns can be defined by . For example:
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
In the above code, there is a 10 pixel spacing between grid rows and grid columns.
The above are the quick start steps for using Grid layout. Of course, Grid layout has more properties and usages, which can be learned in depth when needed.
How to obtain source code:
Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~
Member learning group: [One-to-one Q&A]
If there is anything you don’t understand in the tutorial, you can add a learning member assistant for consultation (WeChat: mifankeji77)