1 -> Add an interaction
Adding interactions can be achieved by associating events on components. This section describes how to use the div, text, and image components to associate the click event to build a like button as shown in the following figure.
The Like button is implemented by associating a DIV component with a click event. The div component contains an image component and a text component:
The image component is used to display the effect of unliked and liked. The click event function alternately updates the paths of liked and unliked images.
The text component is used to display the number of likes, which will be updated synchronously in the function of the click event.
The click event is defined as a function in the js file and can change the state of isPressed, thus updating the displayed image component. If isPressed is true, the number of likes is increased by 1. This function takes effect on the corresponding div component in the HML file, and the style of each subcomponent of the Like button is set in the CSS file. The following is an example of how to implement it:
<!-- test.hml -->
<!-- 点赞按钮 -->
<div>
<div class="like" onclick="likeClick">
<image class="like-img" src="{
{likeImage}}" focusable="true"></image>
<text class="like-num" focusable="true">{
{total}}</text>
</div>
</div>
/* test.css */
.like {
width: 104px;
height: 54px;
border: 2px solid #bcbcbc;
justify-content: space-between;
align-items: center;
margin-left: 72px;
border-radius: 8px;
}
.like-img {
width: 33px;
height: 33px;
margin-left: 14px;
}
.like-num {
color: #bcbcbc;
font-size: 20px;
margin-right: 17px;
}
// test.js
export default {
data: {
likeImage: '/common/unLike.png',
isPressed: false,
total: 20,
},
likeClick() {
var temp;
if (!this.isPressed) {
temp = this.total + 1;
this.likeImage = '/common/like.png';
} else {
temp = this.total - 1;
this.likeImage = '/common/unLike.png';
}
this.total = temp;
this.isPressed = !this.isPressed;
},
}
In addition to that, there are a lot of form components available, such as switches, labels, slide selectors, etc.
2 -> animation
Animations are divided into static animations and continuous animations.
2.1 -> Static animations
The core of static animation is the transform style, which can mainly realize the following three types of transformations, and only one type transformation can be achieved at a time of style setting.
translate: Specifies the distance required for the component to move horizontally or vertically.
scale: Scales the specified component down or in portrait orientation to the desired scale.
rotate: Rotates the specified component along the horizontal or vertical axis or center point at a specified angle.
<!-- test.hml -->
<div class="container">
<text class="translate">hello</text>
<text class="rotate">hello</text>
<text class="scale">hello</text>
</div>
/* test.css */
.container {
flex-direction: column;
align-items: center;
}
.translate {
height: 150px;
width: 300px;
font-size: 50px;
background-color: #008000;
transform: translate(200px);
}
.rotate {
height: 150px;
width: 300px;
font-size: 50px;
background-color: #008000;
transform-origin: 200px 100px;
transform: rotateX(45deg);
}
.scale {
height: 150px;
width: 300px;
font-size: 50px;
background-color: #008000;
transform: scaleX(1.5);
}
2.2 -> Continuous animation
Static animations only have a start state and an end state, and there is no intermediate state, so if you need to set up intermediate transition states and transition effects, you need to use continuous animation to achieve them.
At the heart of continuous animation is the animation style, which defines the start and end states of the animation, as well as the curve of time and velocity. The effects that can be achieved with the animation style are:
animation-name: Sets the background color, transparency, width, height, and transform type that will be applied to the component after the animation is executed.
animation-delay and animation-duration: set the delay and duration of the element after the animation is executed, respectively.
animation-timing-function: Describes the speed curve of animation execution to make the animation smoother.
animation-iteration-count: Defines the number of times the animation is played.
animation-fill-mode: specifies whether the animation will return to its initial state after the animation is executed.
The animation style needs to define the keyframe in the CSS file, set the transition effect of the animation in the keyframe, and call it in the hml file through a style type. The following is an example of how to use animation-name:
<!-- test.hml -->
<div class="item-container">
<text class="header">animation-name</text>
<div class="item {
{colorParam}}">
<text class="txt">color</text>
</div>
<div class="item {
{opacityParam}}">
<text class="txt">opacity</text>
</div>
<input class="button" type="button" name="" value="show" onclick="showAnimation"/>
</div>
/* test.css */
.item-container {
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
}
.header {
margin-bottom: 20px;
}
.item {
background-color: #f76160;
}
.txt {
text-align: center;
width: 200px;
height: 100px;
}
.button {
width: 200px;
font-size: 30px;
background-color: #09ba07;
}
.color {
animation-name: Color;
animation-duration: 8000ms;
}
.opacity {
animation-name: Opacity;
animation-duration: 8000ms;
}
@keyframes Color {
from {
background-color: #f76160;
}
to {
background-color: #09ba07;
}
}
@keyframes Opacity {
from {
opacity: 0.9;
}
to {
opacity: 0.1;
}
}
// test.js
export default {
data: {
colorParam: '',
opacityParam: '',
},
showAnimation: function () {
this.colorParam = '';
this.opacityParam = '';
this.colorParam = 'color';
this.opacityParam = 'opacity';
},
}
3 -> Gesture events
Gestures represent semantic actions (e.g., taps, drags, and long presses) recognized by single or multiple events. A complete gesture may also consist of multiple events, corresponding to the lifecycle of the gesture. Supported events are:
touch
touchstart: The finger touch action begins.
touchmove: Move after touching your finger.
touchcancel: The finger touch action is interrupted, such as a call reminder or pop-up window.
touchend: The end of the finger touch.
click
click: The user quickly taps the screen.
Press and hold
longpress: The user remains in contact with the screen in the same position for an extended period of time.
Examples of use cases are as follows:
<!-- test.hml -->
<div class="container">
<div class="text-container" onclick="click">
<text class="text-style">{
{onClick}}</text>
</div>
<div class="text-container" ontouchstart="touchStart">
<text class="text-style">{
{touchstart}}</text>
</div>
<div class="text-container" ontouchmove="touchMove">
<text class="text-style">{
{touchmove}}</text>
</div>
<div class="text-container" ontouchend="touchEnd">
<text class="text-style">{
{touchend}}</text>
</div>
<div class="text-container" ontouchcancel="touchCancel">
<text class="text-style">{
{touchcancel}}</text>
</div>
<div class="text-container" onlongpress="longPress">
<text class="text-style">{
{onLongPress}}</text>
</div>
</div>
/* test.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.text-container {
margin-top: 10px;
flex-direction: column;
width: 750px;
height: 50px;
background-color: #09ba07;
}
.text-style {
width: 100%;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #ffffff;
}
// test.js
export default {
data: {
touchstart: 'touchstart',
touchmove: 'touchmove',
touchend: 'touchend',
touchcancel: 'touchcancel',
onClick: 'onclick',
onLongPress: 'onlongpress',
},
touchCancel: function (event) {
this.touchcancel = 'canceled';
},
touchEnd: function(event) {
this.touchend = 'ended';
},
touchMove: function(event) {
this.touchmove = 'moved';
},
touchStart: function(event) {
this.touchstart = 'touched';
},
longPress: function() {
this.onLongPress = 'longpressed';
},
click: function() {
this.onClick = 'clicked';
},
}
4 -> Page routing
Many apps consist of multiple pages, such as when users can click on a song from the music list page to jump to the playback interface for that song. These pages need to be concatenated through page routing to achieve redirection as needed.
The page router finds the destination page based on the URL of the page and implements redirection. Taking the most basic jump between two pages as an example, the specific steps are as follows:
In the Project window, open entry > src > mainjsdefault, right-click the pages folder, and select NewJS Page to create a detail page.
Call the router.push() operation to route the route to the details page.
Call router.back() to return to the home page.
4.1 -> Build a page layout
Both the index and detail pages contain a text component and a button component: the text component is used to indicate the current page, and the button component is used to jump to and from two pages. The following is an example of the HML file code:
<!-- index.hml -->
<div class="container">
<text class="title">This is the index page.</text>
<button type="capsule" value="Go to the second page" class="button" onclick="launch"></button>
</div>
<!-- detail.hml -->
<div class="container">
<text class="title">This is the detail page.</text>
<button type="capsule" value="Go back" class="button" onclick="launch"></button>
</div>
4.2 -> Build page styles
Build the page style of the Index and Detail pages, with the text component and the button component displayed in the center, with a spacing of 50px between the two components. The CSS code is as follows (the two page style codes are the same):
/* index.css */
/* detail.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 50px;
margin-bottom: 50px;
}
4.3 -> Implement redirects
In order for the launch method of the button component to take effect, you need to implement the jump logic in the js file of the page. Call the router.push() operation to add the page specified by the URL to the routing stack, that is, to jump to the page specified by the URL. Before you can call the router method, you need to import the router module. The following is an example of the code:
// index.js
import router from '@ohos.router';
export default {
launch() {
router.push ({
url: 'pages/detail/detail',
});
},
}
// detail.js
import router from '@ohos.router';
export default {
launch() {
router.back();
},
}
The operation effect is shown in the following figure:
Top comments (0)