HarmonyOSAPP开发- first FA page学习体验

鸿蒙时代
发布于 2021-8-16 11:00
浏览
0收藏

一、技术相关

使用语言: Js

UI模板: first FA page

工具:deveco studio

二、效果呈现

大致效果如下,有一些交互效果在视频中
HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区
HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区

三、主要步骤如下

第一步

构建页面布局,将页面分解为不同的部分,用容器组件来承载

HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区

一些代码如下

HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区

第二步

构建页面样式,部分代码如下图
HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区

HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区

第三步

构建页面逻辑,主要实现的是两个逻辑功能:

当点击时或者焦点移动到不同的缩略图,swiper滑动到相应的图片;
当焦点移动到购物车区时,“Add To Cart”背景颜色从浅蓝变成深蓝,点击后文字变化为“Cart + 1”,背景颜色由深蓝色变成黄色。添加购物车不可重复操作。
部分代码如下图

HarmonyOSAPP开发- first FA page学习体验-鸿蒙开发者社区

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/firstFApage

分类
标签
HarmonyOSAPP开发- first FA page学习体验.docx 786.92K 21次下载
收藏
回复
举报
回复
    相关推荐