table of Contents
Set the body content of the navigation component
The previous section implements the switching effect of the list on the left side of the navigation component. This section implements the body part. The way to add the body component is to select slot content in the component tree, and then click the container component
every time the top of the body is switched. Click on the name of the category, we add a text component to the container. After the
title is set, add a container below the title as a container for specific information. The
current container is used as the parent container. There may be more than one content inside, so We need to add a loop body to display the required container. We select the parent container and then click on the container as the container for the specific loop body content. The
above steps seem simple, but in fact they are not simple at all, why? Because novices who are newcomers to the workplace, without a period of project experience, it is difficult to figure out where loops are needed, and then how to nest components and who fits into whom.
In addition to analyzing where loops need to be used, what is left is how the page layout is reasonable? In fact, I often worry about the layout. When I didn’t learn the designer’s knowledge, my head was empty and I didn’t know what was reasonable. After learning some knowledge of design specifications, I knew what kind of layout is reasonable and what kind of design is. comfortable.
But as a lazy person, are there any shortcuts? Let me tell you a method to borrow (chao) Jian (xi), which is actually to learn the design style of the head work. How to learn it? Because we want to make an APP, the natural mini program is the most convenient. The specific method is to open WeChat, click on the discovery at the bottom navigation bar, and select the mini program. If you don’t have this menu, your WeChat version is too low and you need to upgrade.
then click the magnifying glass icon
enter keywords tutor, click on the search
of high scores generally small program is a worthy lesson, we choose a relatively satisfied
Let's analyze its page layout. The upper part of the page is a navigation bar, which can switch subjects. The middle of the page is the content of the course. The layout of the course is the picture on the left, the name of the course on the right, and the price of the course below. The name and price are both marked in large letters, and the font of the price is the most prominent, which also conforms to the characteristic that people pay more attention to the price.
Well, we already have the layout, so we need to implement our own layout. We chose the row and column layout for the actual combat this time. The component names are row and col. Row means row and col means column. The biggest feature of the row and column layout is that on the columns, it is called grid layout in CSS, which divides the width of the page into 12 equal parts. If you put three cols, the width of each column is 4.
After we have the basic knowledge, we will start our layout. We first place a row, first select the container at the bottom, then click on the row,
then select Slot cols in the row, and double-click the col component to
select the first col component Slot content, click on the image component,
select the slot content of the second col component, and click on three row components.
Select the slot col component of the row component in the first row. We click on a col component to
select the Slot content of the col component just added, and then click 3 texts, the content modified to the text is number + teacher name + teaching years.
Similarly, set the second line, the information that needs to be displayed in the second line is the region + gender
, and the information that needs to be displayed in the third line is the training subject.
Preview the effect
The effect is not particularly satisfactory. The text in the first line is folded. First adjust the data of the row component, set the interval of col to small, and the
rest is to first display the borders of row and col and then one point. The overall adjustment method is to set The style of each component has been adjusted to a relatively pleasing style
