Development of the homepage of the training applet

Let's develop the homepage of our small program in this article, first look at the prototype

1 Define variables

Because of the classification information displayed on our homepage, the classification information has been stored in the data source now, and we need to read it out through variables.

First open the custom application we created, click New in the code area to create a data table query,

select the category for the data table, and select the query list for the method

2 Greeting construction

After the variables are defined, it is necessary to consider the component construction. For the page, we add a background image to the head, and the middle part is displayed in the form of icons and text.

I want to add an ordinary container as the background,

set the height to 250px, and the background to the image background.

Add an ordinary container to place our welcome message, set the height to 149px and

continue to add an ordinary container to display text, and set the inner margin of 40px

Add two text components inside

Modify the content of the text components, set the inner margin of 12px, and set the text format of the first text component to H4

3 category navigation construction

Select the outermost ordinary container and add an ordinary container to place our classification information

Set a certain background color and rounded corners

Continue to add an ordinary container with a width of 94% and an outer margin of auto, so that the ordinary container is displayed in the center

self {
    
    
    width: 94%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
    padding-right: 7.5px;
    padding-left: 7.5px
}

Add a data list to the normal container, select the classification as the data source, and select the graphic list as the template.

First, simplify the components, only keep the picture and text components,

then remove the border style

, and then bind the background color to the normal container


. Now the components are a bit crowded. Set a little bottom margin

4 Build bottom navigation

On the home page, we need to have a bottom navigation bar, add a tab bar component, and set the label list

Summarize

This article takes everyone to build the homepage, mainly to master the layout of the page and the settings of the data list components. The components of the micro-build already provide a wealth of attributes, and proficiency in the attributes of each component is an essential skill for low-code development.