相关问题
#鸿蒙通关秘籍#鸿蒙UI开发中如何实现带有交互功能的点赞按钮?
1浏览 • 0回复 待解决
redis怎么实现点赞功能 代码怎么写?求大神
2102浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS NEXT中使用组件构建UI布局?
139浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过模块化构建实现微信功能模块的清晰划分?
134浏览 • 1回复 待解决
简易视频播放,如何使用video组件实现视频播放功能
1018浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙中如何通过XComponent绘制复杂UI?
44浏览 • 1回复 待解决
基于UI Observer实现UI组件埋点
498浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙ARK UI中如何通过列表组件优化待办事项管理?
54浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过ArkUI的Grid组件构建横向可滚动的网格布局?
48浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过ArkUINode实现常见UI组件事件的注册与处理?
74浏览 • 1回复 待解决
#鸿蒙通关秘籍#通过自定义组件冻结功能如何优化鸿蒙应用的页面渲染时间?
107浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙开发中,如何实现组件相对锚点的偏移?
49浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过子窗口实现全局弹窗功能?
105浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过组件复用提升鸿蒙应用组件创建效率?
13浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何设置RelativeContainer中子组件的锚点和对齐方式?
42浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何利用冻结功能改进组件性能?
89浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS的启动页UI设计中如何设置RelativeContainer子元素的锚点?
65浏览 • 0回复 待解决
#鸿蒙通关秘籍#在鸿蒙UI开发中如何使用表单组件实现交互?
1浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何通过API设置组件边框样式?
65浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现UI组件和数据之间的绑定?
28浏览 • 1回复 待解决
#鸿蒙通关秘籍#Gradle构建工具
114浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何实现通过单选框切换声音模式的功能?
49浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙ARK UI中实现待办事项列表的添加和删除功能?
74浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何使用NDK接口为UI组件添加事件监听?
98浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙HarmonyOS中通过AVPlayer实现视频全屏播放切换功能?
92浏览 • 0回复 待解决
在鸿蒙UI中构建一个简单的点赞功能组件,具体步骤如下:
编写
.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>通过在
.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; }在
.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; }, }