• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Adding Interactions<a name="EN-US_TOPIC_0000001064068636"></a>
2
3You can make the UI interactive by binding events to components. This section describes how to bind  **<div\>**,  **<text\>**, and  **<image\>**  components to click events to build a thumb up button, as shown in the following figure.
4
5**Figure  1**  Thumb up button effect<a name="fig071716222515"></a>
6
7
8![](figures/zan.gif)
9
10The thumb up button is implemented by binding a click event to a  **<div\>**  component. The  **<div\>**  component contains an  **<image\>**  component and a  **<text\>**  component.
11
12-   The  **<image\>**  component is used to display unselected and selected \(highlighted\) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
13-   The  **<text\>**  component is used to display the number of thumbs up. The number is updated in the function of the click event.
14
15The click event calls the  **likeClick\(\)**  function defined in the  **.js**  file. You can change the value of  **isPressed**  to update the image component. If the value of  **isPressed**  is  **true**, the number of thumbs up is incremented by 1. The  **likeClick\(\)**  function takes effect on the  **<div\>**  component in the  **.hml**  file. The style of each child component for the thumbs up button is set in the  **.css**  file. The following is an example:
16
17```
18<!-- xxx.hml -->
19<!-- Thumb up button -->
20<div>
21  <div class="like" onclick="likeClick">
22    <image class="like-img" src="{{likeImage}}" focusable="true"></image>
23    <text class="like-num" focusable="true">{{total}}</text>
24  </div>
25</div>
26```
27
28```
29/* xxx.css */
30.like {
31  width: 104px;
32  height: 54px;
33  border: 2px solid #bcbcbc;
34  justify-content: space-between;
35  align-items: center;
36  margin-left: 72px;
37  border-radius: 8px;
38}
39.like-img {
40  width: 33px;
41  height: 33px;
42  margin-left: 14px;
43}
44.like-num {
45  color: #bcbcbc;
46  font-size: 20px;
47  margin-right: 17px;
48}
49```
50
51```
52// xxx.js
53export default {
54  data: {
55    likeImage: '/common/unLike.png',
56    isPressed: false,
57    total: 20,
58  },
59  likeClick() {
60    var temp;
61    if (!this.isPressed) {
62      temp = this.total + 1;
63      this.likeImage = '/common/like.png';
64    } else {
65      temp = this.total - 1;
66      this.likeImage = '/common/unLike.png';
67    }
68    this.total = temp;
69    this.isPressed = !this.isPressed;
70  },
71}
72```
73
74The JS UI framework also provides many form components, such as switches, tags, and sliders, for you to flexibly lay out pages and improve their interactions with users.
75
76