1 -> Component Introduction
Components are the core of building pages, and each component implements independent visual and interactive functional units through simple encapsulation of data and methods. Components are independent of each other, ready to use, and can be reused where the requirements are the same.
1.1 -> Component classification
According to the function of the components, they can be divided into the following six categories:
2 -> Layout description
The base width of the device is 720px (px is a logical pixel, not a physical pixel), and the actual display will be scaled according to the actual screen width.
The conversion relationship is as follows:
When the width of the component is set to 100px, the actual display is 100 physical pixels on a screen with a width of 720 physical pixels. On a screen with a width of 1440 physical pixels, it is actually displayed as 200 physical pixels.
The basic elements of a page include the title area, text area, image area, etc., and each basic element can also contain multiple sub-elements, and you can also add buttons, switches, progress bars and other components according to your needs. When building a page layout, you need to think about the following questions for each basic element:
The size and arrangement of the element
Whether there are overlapping elements
Whether you need to set alignment, inner spacing, or boundaries
Whether the child elements are included and where they are arranged
Whether container components are required and their types
Decomposing the elements in the page and then implementing each basic element in order can reduce the visual confusion and logical confusion caused by multi-layer nesting, improve the readability of the code, and facilitate subsequent adjustments to the page. Here's an example to break it down:
Figure 1 Page layout breakdown
Figure 2 Layout breakdown of the message area
3 -> Add a header line and text area
The most commonly used way to implement the title and text area is the underlying component text. The text component is used to display the text, which can be set with different properties and styles, and the text content needs to be written in the label content area. An example of inserting a header and text area into a page is as follows:
<!-- test.hml -->
<div class="container">
<text class="title-text">{
{headTitle}}</text>
<text class="paragraph-text">{
{paragraphFirst}}</text>
<text class="paragraph-text">{
{paragraphSecond}}</text>
</div>
/* test.css */
.container {
flex-direction: column;
margin-top: 20px;
margin-left: 30px;
}
.title-text {
color: #1a1a1a;
font-size: 50px;
margin-top: 40px;
margin-bottom: 20px;
}
.paragraph-text {
color: #000000;
font-size: 35px;
line-height: 60px;
}
// test.js
export default {
data: {
headTitle: 'Capture the Beauty in This Moment',
paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
},
}
4 -> Add an image area
Adding an image area is usually implemented using the image component, which is similar to the text component.
It is recommended to place image resources in the jsdefaultcommon directory, and the common directory needs to be created by yourself. The following is an example of the code:
<!-- test.hml -->
<image class="img" src="{
{middleImage}}"></image>
/* test.css */
.img {
margin-top: 30px;
margin-bottom: 30px;
height: 385px;
}
// test.js
export default {
data: {
middleImage: '/common/ice.png',
},
}
5 -> Add a message area
The function of the message box is as follows: after the user enters the message, click Finish, and the message area will display the message content; The user clicks the delete button on the right to delete the current message and re-enter it.
The comment area is implemented by the click event associated with div, text, and input. Developers can use the input component to implement the input part of the message, the text component to implement the message completion part, and use the status of commentText to mark the component displayed at this time (controlled by the if attribute). Associate the click event in the text component that contains text completion and deletion, updating the commentText state and inputValue. The following is an example of how to implement it:
<!-- test.hml -->
<div class="container">
<text class="comment-title">Comment</text>
<div if="{
{!commentText}}">
<input class="comment" value="{
{inputValue}}" onchange="updateValue()"></input>
<text class="comment-key" onclick="update" focusable="true">Done</text>
</div>
<div if="{
{commentText}}">
<text class="comment-text" focusable="true">{
{inputValue}}</text>
<text class="comment-key" onclick="update" focusable="true">Delete</text>
</div>
</div>
/* test.css */
.container {
margin-top: 24px;
background-color: #ffffff;
}
.comment-title {
font-size: 40px;
color: #1a1a1a;
font-weight: bold;
margin-top: 40px;
margin-bottom: 10px;
}
.comment {
width: 550px;
height: 100px;
background-color: lightgrey;
}
.comment-key {
width: 150px;
height: 100px;
margin-left: 20px;
font-size: 32px;
color: #1a1a1a;
font-weight: bold;
}
.comment-key:focus {
color: #007dff;
}
.comment-text {
width: 550px;
height: 100px;
text-align: left;
line-height: 35px;
font-size: 30px;
color: #000000;
border-bottom-color: #bcbcbc;
border-bottom-width: 0.5px;
}
// test.js
export default {
data: {
inputValue: '',
commentText: false,
},
update() {
this.commentText = !this.commentText;
},
updateValue(e) {
this.inputValue = e.text;
},
}
6 -> Add components
To assemble the basic elements of a page together, you need to use a container component. There are three types of container components commonly used in page layouts: divs, lists, and tabs. When the page structure is relatively simple, you can directly use div as a container, because div is a simple layout container, which can support a variety of subcomponents, which is more convenient to use.
6.1 -> List component
When the page structure is complex, if you use div loop rendering, it is easy to lag, so it is recommended to use the list component instead of the div component to implement the long list layout, so as to achieve a smoother list scrolling experience. It should be noted that list only supports list-item as a subcomponent, and the specific usage example is as follows:
<!-- test.hml -->
<list class="list">
<list-item type="listItem" for="{
{textList}}">
<text class="desc-text">{
{$item.value}}</text>
</list-item>
</list>
/* test.css */
.desc-text {
width: 683.3px;
font-size: 35.4px;
}
// test.js
export default {
data: {
textList: [{value: 'JS FA'}],
},
}
To avoid the sample code being too long, the list in the above example contains only one list-item and only one text component in the list-item. In practice, multiple list-items can be added to a list, and multiple other sub-components can be included in the list-item.
6.2 -> Tabs component
When the page often needs to be loaded dynamically, it is recommended to use the tabs component. The tabs component supports the change event, which is triggered after the tab is switched. The tabs component supports only one tab-bar and one tab-content. Examples of use cases are as follows:
<!-- test.hml -->
<tabs>
<tab-bar>
<text>Home</text>
<text>Index</text>
<text>Detail</text>
</tab-bar>
<tab-content>
<image src="{
{homeImage}}"></image>
<image src="{
{indexImage}}"></image>
<image src="{
{detailImage}}"></image>
</tab-content>
</tabs>
// test.js
export default {
data: {
homeImage: '/common/home.png',
indexImage: '/common/index.png',
detailImage: '/common/detail.png',
},
}
The tab-content component is used to display the content area of the tab, which is filled with the remaining space of tabs by default.
Top comments (0)