树叶云鸿蒙OS教程：鸿蒙OS 添加交互

添加交互通过在组件上关联事件实现。本节将介绍如何用 div、text、image 组件关联 click 事件，构建一个如下图所示的点赞按钮。

图1 点赞按钮效果

点赞按钮通过一个 div 组件关联 click 事件实现。div 组件包含一个 image 组件和一个 text 组件：

• image 组件用于显示未点赞和点赞的效果。click 事件函数会交替更新点赞和未点赞图片的路径。
• text 组件用于显示点赞数，点赞数会在 click 事件的函数中同步更新。

click 事件作为一个函数定义在 js 文件中，可以更改 isPressed 的状态，从而更新显示的 image 组件。如果 isPressed 为真，则点赞数加 1。该函数在 hml 文件中对应的 div 组件上生效，点赞按钮各子组件的样式设置在 css 文件当中。具体的实现示例如下：

添加交互通过在组件上关联事件实现。本节将介绍如何用 div、text、image 组件关联 click 事件，构建一个如下图所示的点赞按钮。
图1 点赞按钮效果




点赞按钮通过一个 div 组件关联 click 事件实现。div 组件包含一个 image 组件和一个 text 组件：


image 组件用于显示未点赞和点赞的效果。click 事件函数会交替更新点赞和未点赞图片的路径。
text 组件用于显示点赞数，点赞数会在 click 事件的函数中同步更新。
click 事件作为一个函数定义在 js 文件中，可以更改 isPressed 的状态，从而更新显示的 image 组件。如果 isPressed 为真，则点赞数加1。该函数在 hml 文件中对应的 div 组件上生效，点赞按钮各子组件的样式设置在 css 文件当中。具体的实现示例如下：


<!-- xxx.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>
/* xxx.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;
}
// xxx.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;
  },
}
JS UI 框架还提供了很多表单组件，例如开关、标签、滑动选择器等，以便于开发者在页面布局时灵活使用和提高交互性，详见容器组件。

/* xxx.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;
}

// xxx.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;
  },
}

JS UI 框架还提供了很多表单组件，例如开关、标签、滑动选择器等，以便于开发者在页面布局时灵活使用和提高交互性。