#鸿蒙通关秘籍#如何通过鸿蒙UI构建简易点赞功能组件?

HarmonyOS
7h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
墨海听涛IoT

在鸿蒙UI中构建一个简单的点赞功能组件,具体步骤如下:

  1. 编写.hml文件,定义包含图片和文本的结构。 html <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>

  2. 通过在.css文件中设置样式,为点赞功能的视觉外观提供一个简洁的设计。 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; }

  3. .js文件中添加点击事件代码逻辑,切换点赞状态。 javascript 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; }, }

分享
微博
QQ
微信
回复
4h前
相关问题
基于UI Observer实现UI组件
498浏览 • 1回复 待解决
#鸿蒙通关秘籍#Gradle构建工具
114浏览 • 0回复 待解决