鴻蒙OS 添加交互

添加交互通過在組件上關聯事件實現。本節(jié)將介紹如何用 div、text、image 組件關聯 click 事件，構建一個如下圖所示的點贊按鈕。

圖1 點贊按鈕效果

點贊按鈕通過一個 div 組件關聯 click 事件實現。div 組件包含一個 image 組件和一個 text 組件：

• image 組件用于顯示未點贊和點贊的效果。click 事件函數會交替更新點贊和未點贊圖片的路徑。
• text 組件用于顯示點贊數，點贊數會在 click 事件的函數中同步更新。

click 事件作為一個函數定義在 js 文件中，可以更改 isPressed 的狀態(tài)，從而更新顯示的 image 組件。如果 isPressed 為真，則點贊數加 1。該函數在 hml 文件中對應的 div 組件上生效，點贊按鈕各子組件的樣式設置在 css 文件當中。具體的實現示例如下：

添加交互通過在組件上關聯事件實現。本節(jié)將介紹如何用 div、text、image 組件關聯 click 事件，構建一個如下圖所示的點贊按鈕。
圖1 點贊按鈕效果
點贊按鈕通過一個 div 組件關聯 click 事件實現。div 組件包含一個 image 組件和一個 text 組件：
image 組件用于顯示未點贊和點贊的效果。click 事件函數會交替更新點贊和未點贊圖片的路徑。
text 組件用于顯示點贊數，點贊數會在 click 事件的函數中同步更新。
click 事件作為一個函數定義在 js 文件中，可以更改 isPressed 的狀態(tài)，從而更新顯示的 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 框架還提供了很多表單組件，例如開關、標簽、滑動選擇器等，以便于開發(fā)者在頁面布局時靈活使用和提高交互性，詳見容器組件。

/* 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 框架還提供了很多表單組件，例如開關、標簽、滑動選擇器等，以便于開發(fā)者在頁面布局時靈活使用和提高交互性。